Foundation CSS XY Grid Responsive Adjustments

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 Responsive Adjustment classes are used to switch back to auto behavior from percentage behavior or shrink behavior.

Foundation CSS XY Grid Responsive Adjustments Classes

• .[size]-auto: This class helps to switch back to auto behavior. Here size can be small, medium, or large.
• .[size]-shrink:  This class helps to switch back to shrink behavior. Here size can be small, medium, or large.

Syntax:

<div class="grid-x">
 <div class="[size]-auto">
 .......
 </div>
</div>

Example 1: This example illustrates the use of grid responsive adjustments with a large-auto class.

Output:

👁 Foundation CSS XY Grid Responsive Adjustments

Example 2: This example illustrates the use of grid responsive adjustments with a large-shrink class.

Output:

👁 Foundation CSS XY Grid Responsive Adjustments

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