Foundation CSS XY Vertical Grids

Foundation CSS is an open-source and 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 and can be accessible to any device. In this article, we will discuss the XY Vertical Grid in Foundation CSS.

The XY Vertical Grid is used to shift the internal cells automatically to a vertical direction rather than a horizontal direction.

Foundation CSS XY Vertical Grids Classes:

• grid-y: This class is used to give vertical grids.

Syntax:

<div grid-y style="height: 500px;">
 <div class="cell small-n medium-n large-n">
 ...
 </div>
 ...
</div>

Note: Here n is the positive number between 1 and 12 to define grid size.

Example 1: Below is the example that illustrates the use of Vertical Grids.

Output:

👁 Foundation CSS XY Vertical Grids

Example 2: Below is another example that illustrates the use of Vertical Grids.

Output:

👁 Foundation CSS XY Vertical Grids

Reference: https://get.foundation/sites/docs/xy-grid.html#vertical-grids