Foundation CSS Flex Grid Responsive Adjustments

Last Updated : 16 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Flex Grid Responsive Adjustments uses use .small-* class. The medium-expand or large-expand class is used to switch back to the expand behavior from a percentage or shrink behavior.

Foundation CSS Flex Grid Responsive Adjustments Classes:

row: The row class is used to create the row.
small-*: It is used to create a column that is divided into small-size grids by the number used in the class. The small-12 class can be used to allow stacking even on larger screens.

Syntax:

<div class="row">
    <div class="small-* columns">
        First column
    </div>
     ....
    // Other columns
</div>

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Flex Grid Responsive Adjustments</title> 
    <link rel="stylesheet"
          href="foundation-flex.css" /> 
    <script src="jquery.min.js"> 
    </script> 
    <script src="foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green">geeksforgeeks</h1> 
    <h2>Example of Flex Grid</h2> 
    <div class="row"> 
        <div class="small-6 large-expand columns" 
             style="background-color:#8BD6EE;"> 
            First column 
        </div> 
  
        <div class="small-6 large-expand columns" 
             style="background-color:#C0B0F0;"> 
            Second column 
        </div> 
  
        <div class="small-6 large-expand columns" 
             style="background-color:#8BD6EE;"> 
            Third column 
        </div> 
  
        <div class="small-6 large-expand columns" 
             style="background-color:#C0B0F0;"> 
            Forth column 
        </div> 
  
        <div class="small-6 large-expand columns" 
             style="background-color:#8BD6EE;"> 
            Fifth column 
        </div> 
  
        <div class="small-6 large-expand columns" 
             style="background-color:#C0B0F0;"> 
            Sixth column 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Foundation CSS Flex Grid Responsive Adjustments

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Flex Grid Responsive Adjustments</title> 
    <link rel="stylesheet" 
          href="foundation-flex.css" /> 
    <script src="jquery.min.js"> 
    </script> 
    <script src="foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green">geeksforGeeks</h1> 
    <h3>Flex Grid Example</h3> 
    <div class="row"> 
        <div class="small-4 columns"
             style="background-color: #8bd6ee">  
          Small 4 
        </div> 
        <div class="small-4 columns" 
             style="background-color: #ff6347"> 
          Small 4 
        </div> 
        <div class="small-4 columns" 
             style="background-color: #8bd6ee"> 
          Small 4 
        </div> 
    </div> 
    <div class="row"> 
        <div class="medium-6 large-9 columns" 
             style="background-color: #c0b0f0"> 
          Medium 6/ Large 9 
        </div> 
        <div class="medium-6 large-3 columns"
             style="background-color: #7b68ee">  
          Medium 6/ Large 3 
        </div> 
    </div> 
</body> 
  
</html>