Open In App

Foundation CSS XY Grid Responsive Adjustments

Improve
Improve
Like Article
Like
Save
Share
Report

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 Block Grid in Foundation CSS.

The XY Grid Responsive Adjustment classes are used to switch back to auto behavior from percentage behavior or shrink behavior.

Foundation CSS XY Grid Responsive Adjustments Classes

  • .[size]-auto: This class helps to switch back to auto behavior. Here size can be small, medium, or large.
  • .[size]-shrink:  This class helps to switch back to shrink behavior. Here size can be small, medium, or large.

Syntax:

<div class="grid-x">
    <div class="[size]-auto">
        .......
    </div>
</div>

Example 1: This example illustrates the use of grid responsive adjustments with a large-auto class.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS XY Grid Responsive Adjustments</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
 
    <!-- Compressed JavaScript -->
    <script  src=
    </script>
 
    <style>
        body {
            padding: 100px;
        }
 
        .grid-x {
            background-color: rgb(236, 215, 20);
        }
 
        .customClass1 {
            background-color: rgb(31, 214, 31);
            line-height: 50px;
            color: white;
        }
 
        .customClass2 {
            background-color: rgb(18, 116, 18);
            line-height: 50px;
            color: white;
        }
 
        .customClass3 {
            background-color: rgb(20, 212, 20);
            line-height: 50px;
            color: white;
        }
    </style>
</head>
 
<body>
    <h1 style="text-align: center; color: green">
        GeeksforGeeks
    </h1>
 
    <div class="grid-x">
        <div class="large-auto customClass1 cell">
          Geek-1
        </div>
        <div class="large-auto customClass2 cell">
          Geek-2
        </div>
        <div class="large-auto customClass3 cell">
          Geek-3
        </div>
    </div>
</body>
 
</html>


Output:

Foundation CSS XY Grid Responsive Adjustments

Foundation CSS XY Grid Responsive Adjustments

Example 2: This example illustrates the use of grid responsive adjustments with a large-shrink class.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS XY Grid Responsive Adjustments</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
 
    <!-- Compressed JavaScript -->
    <script
            src=
    </script>
 
    <style>
        body {
            padding: 100px;
        }
 
        .grid-x {
            background-color: rgb(236, 215, 20);
        }
 
        .customClass1 {
            background-color: rgb(31, 214, 31);
            line-height: 50px;
            color: white;
        }
 
        .customClass2 {
            background-color: rgb(18, 116, 18);
            line-height: 50px;
            color: white;
        }
 
        .customClass3 {
            background-color: rgb(20, 212, 20);
            line-height: 50px;
            color: white;
        }
    </style>
</head>
 
<body>
    <h1 style="text-align: center; color: green">
        GeeksforGeeks
    </h1>
 
    <div class="grid-x">
        <div class="large-shrink customClass1 cell">
          Geek-1
        </div>
        <div class="large-shrink customClass2 cell">
          Geek-2
        </div>
        <div class="large-shrink customClass3 cell">
          Geek-3
        </div>
    </div>
</body>
 
</html>


Output:

Foundation CSS XY Grid Responsive Adjustments

Foundation CSS XY Grid Responsive Adjustments

Reference: https://get.foundation/sites/docs/xy-grid.html#responsive-adjustments



Last Updated : 10 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads