Foundation CSS XY Grid Gutters

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.

Output:

👁 Image

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

Output:

👁 Image

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