Foundation CSS XY Grid

Last Updated : 17 Oct, 2022

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device.

In this article, we will know about XY Grid in Foundation CSS.

The following page describes the features of XY Grid along with the description.

Importing: XY grid is the default Foundation grid. It is always available in the default CDN link of the foundation.
Basics: The XY Grid system is a 12-column grid system based on flexbox. The XY grid structure is similar to that of the float grid-like bootstrap, or something like that.
Gutters: In Foundation CSS, the XY Grid Gutters are used to give margin and padding to the grid element.
Foundation CSS XY Grid Gutters Classes:
- grid-margin-x: This class is used to give a margin along the x-axis.
- grid-margin-y: This class is used to give a margin along the y-axis.
- grid-padding-x: This class is used to give padding along the x-axis.
- grid-padding-y: This class is used to give padding along the y-axis.
Grid Container: The XY Grid container is used to provide the horizontal space available for the grid container. By default, the grid container takes up the full available width.
Auto sizing:
- .[size]-auto: This class helps to switch back to auto behavior. The size can be small, medium, or large.
- .[size]-shrink: This class helps to switch back to shrink behavior. The size can be small, medium, or large.
Responsive Adjustments: The XY Grid Responsive adjustment classes are used to switch back to auto behavior from percentage behavior or shrink behavior.
Collapse Cells: The XY grid collapse cells are used when you don’t want every media query to be collapsed. To deal with this situation, use media query size along with collapse and add it to the grid element.
Offsets: This class is used to set the offset of the grid. The size options are small, medium, and large, and n is the number.
Block Grids: The CSS XY Block Grid is used to add the width of the cell at the directional level instead of the individual level.
Vertical Grids: The XY Vertical Grid is used to shift the internal cells automatically to a vertical direction rather than a horizontal direction.
Grid Frame: This class helps us to pin the height of the grid. If you use 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.
Browser support: The XY grid is supported in Chrome, Firefox, Safari 6+, IE11, iOS 7+, and Android 4.4+.

Example 1: This example illustrates the use of XY Block Grids

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS XY Block Grids</title> 
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body style="margin-inline:10rem;"> 
  
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <h3>Foundation CSS XY Block Grids </h3> 
  
    <div class="grid-x grid-padding-x  
        small-up-2 medium-up-4 large-up-6"> 
        <div class="cell" 
            style="background-color:blue"> 
            gfg 
        </div> 
        <div class="cell" 
            style="background-color:rgb(140, 160, 151)"> 
            gfg 
        </div> 
        <div class="cell" 
            style="background-color:blue"> 
            gfg 
        </div> 
        <div class="cell" 
            style="background-color:rgb(0, 255, 191)"> 
            gfg 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: Below is the example that illustrates the use of grid gutters with the grid-padding-x class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS XY Grid Gutters</title> 
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
</head> 
  
<body style="margin-inline:10rem;"> 
    <center> 
        <h1 style="text-align:center;color:green"> 
            GeeksforGeeks 
        </h1> 
  
        <h3>Foundation CSS XY Grid Gutters</h3> 
  
        <div class="callout" style="border:2px solid black;"> 
            <div class="grid-x grid-padding-x"> 
                <div class="cell medium-6 large-4" 
                    style="background-color:blanchedalmond"> 
                    GFG Gutters 
                </div> 
                <div class="cell medium-4 large-8" 
                    style="background-color:rgb(40, 157, 220)"> 
                    GFG Gutters 
                </div> 
            </div> 
        </div> 
    </center> 
</body> 
  
</html>