Skip to content
Related Articles

Related Articles

Foundation CSS XY Grid Frame

View Discussion
Improve Article
Save Article
  • 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=
        crossorigin="anonymous" />
  
    <!-- Compressed JavaScript -->
    <script src=
        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=
        crossorigin="anonymous" />
  
    <!-- Compressed JavaScript -->
    <script src=
        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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!