Foundation CSS Flex Grid Offsets

Last Updated : 16 Oct, 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 and can be accessible to any device. In this article, we discuss flex grid offsets.

flex grid offsets: Offset work is similar to the float grid. flex grid offset is used to set the margin on left for a column and column alignment in right.

Flex Grid offset class:

[size]-offset-[n]: This class is used to set the offset of the grid. The size is between small, and large, and n is the number.

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="row"> 
        <div class="columns small-4 large-offset-2" 
             style="background-color:rgb(99, 94, 201)"> 
             Offset 2 on large 
        </div> 
  
        <div class="columns small-4" 
             style="background-color:rgb(234, 189, 27)">  
            small 4 columns 
        </div> 
    </div> 
</body> 
</html> 

Output:

Example 2: This example illustrates the use of grid offset using the small-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="color: green"> 
            GeeksforGeeks 
        </h1> 
  
        <h3>Foundation CSS XY Grid Offsets</h3> 
    </center> 
  
    <div class="row"> 
        <div class="columns small-4 small-offset-4" 
             style="background-color:rgb(205, 137, 235)"> 
             Offset 4 on small 
        </div> 
  
        <div class="columns small-4" 
            style="background-color:rgb(23, 142, 216)">  
            small 4 columns 
        </div> 
    </div> 
</body> 
</html> 