Foundation CSS XY Grid Offsets

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.

XY Grid offset class:

• [size]-offset-[n]: This class is used to set the offset of the grid. Here size is the among small, medium, large, and n is the number.

Syntax:

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

Example 1: This example illustrates the use of grid offset using the large-offset-2 class.

Output:

👁 Foundation CSS XY Grid Offsets

Example 2: This example illustrates the use of grid offset using the medium-offset-4 class.

Output: 

👁 Foundation CSS XY Grid Offsets

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