Open In App

Foundation CSS XY Grid Offsets

Improve
Improve
Like Article
Like
Save
Share
Report

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=
  
  <!-- Compressed JavaScript -->
  <script src=
  </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:

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.

HTML




<!DOCTYPE html>
<html lang="en">
    
  <head>
    <title>Foundation CSS XY Grid Offsets</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
  
    <!-- Compressed JavaScript -->
    <script src=
    </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: 

Foundation CSS XY Grid Offsets

Foundation CSS XY Grid Offsets

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



Last Updated : 10 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads