Foundation CSS XY Grid Frame
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device.
In this article, we will discuss the XY Grid Frame in Foundation CSS.
The XY grid consolidates the grid frame from Apps to many a lot of useful features. To use XY grid frame just add .grid-frame to your HTML grid. It will set the grid to cover the full height of the browser window i.e. 100vh.
XY Grid Frame class:
- grid-frame: This class helps us to pin the height of the grid. If you put this class in the outer grid then it will take the height of the port and if you use it in the nested grid then it will take the height of the container.
Syntax:
<div class="grid-frame"> ... </div>
Below are the examples that illustrate the use of XY Grid Frame classes:
Example 1: This example illustrates the use of the .grid-frame class for text.
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- Compressed CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin = "anonymous" /> <!-- Compressed JavaScript --> < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin = "anonymous" ></ script > </ head > < body style = "padding: 50px" > < div class = "grid-y grid-frame" > < div class="cell shrink header medium-cell-block-container" style = "border: 2px solid green" > < h3 > < strong >XY Grid Frame Header</ strong > </ h3 > < div class = "grid-x grid-padding-x" > < div class = "cell medium-4" > Header column-1 covering 4 grid blocks. </ div > < div class = "cell medium-4 medium-cell-block" > < p style = "width: 80vw" > Header middle column-2 covering 4 grid blocks. </ p > </ div > < div class = "cell medium-4" > Header column-3 covering 4 grid blocks </ div > </ div > </ div > < div class = "cell medium-auto medium-cell-block-container" style = "border: 2px solid rgb(9, 88, 9)" > < div class = "grid-x grid-padding-x" > < div class = "cell medium-4 medium-cell-block-y" > < h3 > < strong >XY Grid Frame sidebar scrolling</ strong > </ h3 > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > </ div > < div class = "cell medium-8 medium-cell-block-y" > < h3 > < strong >XY Grid Frame body scrolling</ strong > </ h3 > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > </ div > </ div > </ div > < div class = "cell shrink footer" style = "border: 2px solid green" > < h3 > < strong >XY Grid Frame footer</ strong > </ h3 > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses </ p > </ div > </ div > </ body > </ html > |
Output:
Example 2: This example illustrates the use of .grid-frame class for images.
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- Compressed CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin = "anonymous" /> <!-- Compressed JavaScript --> < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" crossorigin = "anonymous" ></ script > </ head > < body style = "padding: 50px" > < div class = "grid-y grid-frame" > < div class="cell shrink header medium-cell-block-container" style = "border: 2px solid green" > < h3 > < strong >XY Grid Frame Header</ strong > </ h3 > < div class = "grid-x grid-padding-x" > < div class = "cell medium-4" > Header column-1 covering 4 grid blocks. </ div > < div class = "cell medium-4 medium-cell-block" > < p style = "width: 80vw" > Header middle column-2 covering 4 grid blocks. </ p > </ div > < div class = "cell medium-4" > Header column-3 covering 4 grid blocks </ div > </ div > </ div > < div class = "cell medium-auto medium-cell-block-container" style = "border: 2px solid rgb(9, 88, 9)" > < div class = "grid-x grid-padding-x" > < div class = "cell medium-4 medium-cell-block-y" > < h3 > < strong >XY Grid Frame sidebar scrolling</ strong > </ h3 > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > < p > Billions of Users, Millions of Articles Published, Thousands Got Hired by Top Companies and the numbers are still growing.. </ p > </ div > < div class = "cell medium-8 medium-cell-block-y" > < h3 > < strong >XY Grid Frame body scrolling</ strong > </ h3 > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses, Frequent Coding Competitions ,Webinars by Industry Experts, Internship opportunities and Job Opportunities. </ p > </ div > </ div > </ div > < div class = "cell shrink footer" style = "border: 2px solid green" > < h3 > < strong >XY Grid Frame footer</ strong > </ h3 > < p > We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses </ p > </ div > </ div > </ body > </ html > |
Output:
Reference: https://get.foundation/sites/docs/xy-grid.html#grid-frame
Contact Us