Foundation CSS XY Grid Frame

Last Updated : 28 Mar, 2022

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> 