Foundation CSS XY Grid Sass Reference
Last Updated :
30 Aug, 2022
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 Grid Sass Reference in Foundation CSS. The CSS XY Block Grid is used to add the width of the cell at the directional level instead of the individual level. To use it, we need to add the.[size]-up-[n] class to grid-x as it does not work for vertical grids. Here ‘n’ represents the cells that have to be displayed in every direction, and ‘size’ represents the breakpoint at which effects can be applied.
Variable Used:
| Variable-Name |
Description |
Type |
Default-Value |
| $xy-grid |
This variable is used to
enable the XY grid. |
Boolean |
true |
| $grid-container |
This variable is used to define the maximum width of a grid container. |
Number |
$global-width |
| $grid-columns |
This variable is used to define the number of columns used in the grid. |
Number |
12 |
| $grid-margin-gutters |
This variable is used to define the amount of margin between cells at different screen sizes when using the margin grid. |
Map or Length |
“small”: 20px
“medium”: 30px |
| $grid-padding-gutters |
This variable is used to define the amount of padding in cells at different screen sizes when using the padding grid. |
Map or Length |
$grid-margin-gutters |
| $grid-container-padding |
This variable is used to define the amount of padding to use when padding the grid container. |
Map or Length |
$grid-padding-gutters |
| $grid-container-max |
This variable is used to define the maximum width to apply to a grid container. |
Number |
$global-width |
| $xy-block-grid-max |
This variable is used to define the maximum number of cells in an XY block grid. |
Number |
8 |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of XY Grid.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<link rel="stylesheet" href="style.css">
<title>GeeksforGeeks</title>
<script src=
</script>
</head>
<body>
<center>
<h1 class="title" style="color:green;" >
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div class="gfg">
<div class="callout warning grid-x
grid-margin-x small-up-2
medium-up-4 large-up-6">
<div class="cell callout">GfG1</div>
<div class="cell callout">GfG2</div>
<div class="cell callout">GfG3</div>
<div class="cell callout">GfG4</div>
<div class="cell callout">GfG5</div>
<div class="cell callout">GfG6</div>
<div class="cell callout">GfG7</div>
<div class="cell callout">GfG8</div>
</div>
</div>
</center>
</body>
</html>
|
SASS Code:
$grid-container:90%;
.gfg
{
width:$grid-container;
}
Compiled CSS Code:
.gfg
{
width: 90%;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of XY Grid.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
<link rel="stylesheet" href="style.css">
<title>GeeksforGeeks</title>
<script src=
</script>
</head>
<body>
<center>
<h1 class="title" style="color:green;" >
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div class="gfg">
<div class="callout warning grid-x
grid-margin-x small-up-2">
<div class="cell callout">GfG1</div>
<div class="cell callout">GfG2</div>
<div class="cell callout">GfG3</div>
</div>
</div>
</center>
</body>
</html>
|
SASS Code:
$grid-container-padding :100px;
.cell{
padding:$grid-container-padding ;
}
Compiled CSS Code:
.cell{
padding: 100px;
}
Output:
Reference: https://get.foundation/sites/docs/xy-grid.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...