Foundation CSS XY Grid Collapse Cells

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 XY Grid Collapse Cells is used when you don't want every media query to be collapsed. To deal with this situation, use media query size along with collapse and add it to the grid element.

XY Grid collapse cells class:

• [size]-[gutter-type]-collapse: This class helps us to remove the gutters of the cell.

Syntax:

<div class="grid-x [size]-[gutter-type]-collapse">
 ...
</div>

Example 1: This example illustrates the use grid collapse cells with large-padding-collapse class.

Output:

👁 Foundation CSS XY Grid Collapse Cells

Example 2: This example illustrates the use grid collapse cells with medium-margin-collapse class.

Output:

👁 Foundation CSS XY Grid Collapse Cells

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