Foundation CSS XY Grid Auto Sizing

Last Updated : 05 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.

The XY Grid Auto sizing is used to allocate the remaining width of the cell automatically by providing either .auto class or.[size]-auto class.

Foundation CSS XY Grid Auto Sizing Classes:

[size]-auto: This class helps to automatically take the remaining width of the cell after the given size. Here size can be small, medium, or large.
auto: This class helps to automatically take the remaining width of the cell.

<div class="grid-x">
    <div class=" cell [size]-auto || auto">
        ...
    </div>
</div>

Example 1: This example illustrates the use of grid Auto sizing with auto class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS XY Grid Auto Sizing</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> 
  
    <style> 
        body { 
            padding: 100px; 
        } 
  
        .grid-x { 
            background-color: rgb(236, 215, 20); 
        } 
  
        .customClass1 { 
            background-color: rgb(31, 214, 31); 
            line-height: 50px; 
            color: white; 
        } 
  
        .customClass2 { 
            background-color: rgb(18, 116, 18); 
            line-height: 50px; 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="text-align: center; color: green"> 
        GeeksforGeeks 
    </h1> 
  
    <div class="grid-x grid-margin-x"> 
        <div class="cell small-4 customClass1"> 
          covering only 4 cells 
        </div> 
        <div class="cell customClass2 auto"> 
          covering remaining part! 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Foundation CSS XY Grid Auto Sizing

Example 2: This example illustrates the use of grid Auto sizing with [size]-auto class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS XY Grid Auto Sizing</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> 
  
    <style> 
        body { 
            padding: 100px; 
        } 
  
        .grid-x { 
            background-color: rgb(236, 215, 20); 
        } 
  
        .customClass1 { 
            background-color: rgb(31, 214, 31); 
            line-height: 50px; 
            color: white; 
        } 
  
        .customClass2 { 
            background-color: rgb(18, 116, 18); 
            line-height: 50px; 
            color: white; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="text-align: center; color: green"> 
        GeeksforGeeks 
    </h1> 
  
    <div class="grid-x grid-margin-x"> 
        <div class="cell small-4 customClass1"> 
          covering only 4 cells 
        </div> 
        <div class="cell customClass2 large-auto"> 
          covering remaining part! 
        </div> 
    </div> 
</body> 
  
</html>