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 Block Grid in Foundation CSS. The CSS XY Block Grid is used to add the width of the cell in the directional level and instead of the individual level. To use it, we need to add the.[size]-up-[n] class to grid-x as it doesn’t 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.
XY Block Grid class:
- [size]-up-[n]: This class creates a block grid at every size breakpoints and in n-number of cells.
Syntax:
<div class="grid-x grid-padding-x
[size]-up-[n]">
.........
</div>Example 1: This example illustrates the use of XY Block Grids using grid-margin-x, small-up-2, medium-up-4, and large-up-6 classes.
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS XY Block Grids</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<script src=
</script>
</head>
<body style="margin-inline: 10rem;">
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Foundation CSS XY Block Grids </h3>
<div class="callout warning grid-x grid-margin-x small-up-2
medium-up-4 large-up-6">
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
</div>
</center>
</body>
</html>
|
Output:
Example 2: This example illustrates the use of XY Block Grids using grid-padding-x, small-up-1, medium-up-3 and large-up-5 classes..
<!DOCTYPE html> <html lang="en">
<head>
<title>Foundation CSS XY Block Grids</title>
<!-- Compressed CSS -->
<link rel="stylesheet" href=
<!-- Compressed JavaScript -->
<script src=
</script>
</head>
<body style="margin-inline: 10rem;">
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Foundation CSS XY Block Grids </h3>
<div class="callout warning grid-x grid-padding-x small-up-1
medium-up-3 large-up-5">
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
<div class="cell callout">gfg</div>
</div>
</center>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/xy-grid.html#block-grids