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