Open In App

Foundation CSS XY Grid Gutters

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and 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 and can be accessible to any device. In this article, we will discuss the XY Grid frame in Foundation CSS.

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 margin along the x-axis.
  • grid-margin-y: This class is used to give 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.

Syntax:

<div class="grid-x XY-Grid-Gutters-Classes:">
   ....
</div>

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS XY Grid Gutters</title>
  <!-- Compressed CSS -->
  <link rel="stylesheet" 
        href=
</head>
  
<body style="margin-inline:10rem;">
  <center>
    <h1 style="color:green">
      GeeksforGeeks
    </h1>
  
    <h3>Foundation CSS XY Grid Gutters</h3>
  
    <div class="callout success">
      <div class="grid-x grid-margin-x">
        <div class="cell medium-6 
                    callout alert large-4">
          cell with medium-6 large-4
        </div>
          
        <div class="cell medium-4 
                    callout warning large-8">
          cell with medium-4 large-8
        </div>
      </div>
    </div>
  </center>
</body>
  
</html>


Output:

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
  <title>Foundation CSS XY Grid Gutters</title>
  <!-- Compressed CSS -->
  <link rel="stylesheet"
        href=
  
</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 success">
      <div class="grid-x grid-padding-x">
        <div class="cell medium-6 
                    callout alert large-4">
          cell with medium-6 large-4
        </div>
      
        <div class="cell medium-4 
                    callout warning large-8">
          cell with medium-4 large-8
        </div>
      </div>
    </div>
  </center>
</body>
  
</html>


Output:

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



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