Foundation CSS XY Vertical Grids

Last Updated : 16 Mar, 2022

Foundation CSS is an open-source and 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 will discuss the XY Vertical Grid in Foundation CSS.

The XY Vertical Grid is used to shift the internal cells automatically to a vertical direction rather than a horizontal direction.

Foundation CSS XY Vertical Grids Classes:

grid-y: This class is used to give vertical grids.

Syntax:

<div grid-y style="height: 500px;">
  <div class="cell small-n medium-n large-n">
       ...
  </div>
    ...
</div>

Note: Here n is the positive number between 1 and 12 to define grid size.

Example 1: Below is the example that illustrates the use of Vertical Grids.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title>Foundation CSS XY Vertical Grids</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="color:green"> 
      GeeksforGeeks 
    </h1> 
  
    <h5>Foundation CSS XY Vertical Grids</h5> 
  
    <div class="grid-y" style="height: 500px;"> 
      <div class="cell small-6 medium-8 large-2 callout"> 
        cell with small-6 medium-8 large-2 
      </div> 
      
      <div class="cell small-6 medium-4 large-10 callout"> 
        cell with small-6 medium-4 large-10 
      </div> 
    </div> 
  </center> 
</body> 
  
</html>

Output:

Foundation CSS XY Vertical Grids

Example 2: Below is another example that illustrates the use of Vertical Grids.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
  <title>Foundation CSS XY Vertical Grids</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> 
  
    <h5>Foundation CSS XY Vertical Grids</h5> 
  
    <div class="grid-y" style="height: 500px;"> 
      <div class="cell callout small-8 medium-4 large-9"> 
        cell with small-8 medium-4 large-9 
      </div> 
  
      <div class="cell callout small-4 medium-8 large-3"> 
        cell with small-4 medium-8 large-3 
      </div> 
    </div> 
  </center> 
</body> 
  
</html>