Foundation CSS XY Grid Collapse Cells

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. The XY Grid Collapse Cells is used when you don’t want every media query to be collapsed. To deal with this situation, use media query size along with collapse and add it to the grid element.

XY Grid collapse cells class:

[size]-[gutter-type]-collapse: This class helps us to remove the gutters of the cell.

Syntax:

<div class="grid-x [size]-[gutter-type]-collapse">
    ...
</div>

Example 1: This example illustrates the use grid collapse cells with large-padding-collapse class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Foundation CSS XY Grid Collapse Cells</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> 
  <center> 
    <h1 style=" text-align: center; color: green"> 
      GeeksforGeeks 
    </h1> 
      
    <h3>Foundation CSS XY Grid Collapse Cells</h3> 
  </center> 
      
  <div class="callout warning grid-x  
              grid-margin-x large-margin-collapse"> 
    <div class="cell callout alert small-6"> 
      having gutters on small, medium and no gutters after large 
    </div> 
  
    <div class="cell callout success small-6"> 
      having gutters on small, medium and no gutters after large 
    </div> 
  </div> 
</body> 
  
</html>

Output:

Foundation CSS XY Grid Collapse Cells

Example 2: This example illustrates the use grid collapse cells with medium-margin-collapse class.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Foundation CSS XY Grid Collapse Cells</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> 
  <center> 
    <h1 style="text-align: center; color: green"> 
         GeeksforGeeks 
    </h1> 
    <h3>Foundation CSS XY Grid Collapse Cells</h3> 
  </center> 
    
  <div class="callout alert grid-x  
              grid-margin-x  
              medium-margin-collapse"> 
    <div class="cell callout success small-6"> 
      having gutters on small and   
      no gutters on medium or large 
    </div> 
  
    <div class="cell callout warning small-6"> 
      having gutters on small and  
      no gutters on medium or large 
    </div> 
  </div> 
</body> 
  
</html>