Foundation CSS XY Grid Auto Sizing

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 Auto sizing is used to allocate the remaining width of the cell automatically by providing either .auto classor.[size]-auto class.

Foundation CSS XY Grid Auto Sizing Classes:

• [size]-auto: This class helps to automatically take the remaining width of the cell after the given size. Here size can be small, medium, or large.
• auto: This class helps to automatically take the remaining width of the cell.

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

Example 1: This example illustrates the use of grid Auto sizing with auto class.

Output:

👁 Foundation CSS XY Grid Auto Sizing

Example 2: This example illustrates the use of grid Auto sizing with [size]-auto class.

Output: 

👁 Foundation CSS XY Grid Auto Sizing

Reference: https://get.foundation/sites/docs/xy-grid.html#auto-sizing