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.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Foundation CSS XY Grid Offsets</title>
  <!-- Compressed CSS -->
  <link rel="stylesheet" 
        href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">

  <!-- Compressed JavaScript -->
  <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
  </script>
</head>

<body style="margin-inline: 5rem;">
  <center>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>

    <h3>Foundation CSS XY Grid Offsets</h3>
  </center>

  <div class="callout warning 
              grid-x grid-margin-x">
    <div class="callout success cell
                small-4 large-offset-2">
      it has offset-2 in large
    </div>

    <div class="callout success cell small-4">
      small-4 cells
    </div>
  </div>
</body>

</html>

Output:

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

HTML

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <title>Foundation CSS XY Grid Offsets</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"/>

    <!-- Compressed JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
  </head>

  <body style="margin-inline: 5rem;">
    <center>
      <h1 style="text-align: center; color: green">
        GeeksforGeeks
      </h1>
      
      <h3>Foundation CSS XY Grid Offsets</h3>
    </center>
    
    <div class="callout warning 
                grid-x grid-margin-x">
      <div class="callout success 
                  small-4 medium-offset-4">
        it has medium-offset-4
      </div>

      <div class="cell callout success small-4">
        small-4 cells
      </div>
    </div>
  </body>

</html>

Output:

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

Foundation CSS XY Grid Offsets

Explore