VOOZH about

URL: https://www.geeksforgeeks.org/css/foundation-css-xy-grid-offsets/

⇱ Foundation CSS XY Grid Offsets - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Foundation CSS XY Grid Offsets

Last Updated : 10 Mar, 2022

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
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
Foundation CSS XY Grid Offsets

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

Comment