Foundation CSS Flex Grid

Last Updated : 16 Oct, 2022

Foundation CSS is an open-source and responsive front-end framework built by the 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 know about Flex Grid in Foundation CSS.

Browser support: The flex grid is only supported in Chrome, Firefox, Safari 6+, IE10+, iOS 7+, and Android 4.4+.

The following page describes the features of Flex Grid along with the description.

Importing: By default, the flex grid is not enabled. It includes the export mixin to use the default CSS for the flex grid.

Let to see the format of the Flex grid-

@import 'foundation';

// include foundation-grid;
@include foundation-flex-classes;
@include foundation-flex-grid;the

Basics: The structure of the flex grid is similar to that of the float grid. The class .row is used for the row. The class .column is used for the column.

Advanced Sizing: Flex Grid Advanced Sizing is used to fill the extra space when no sizing class is added to the column. This type of behavior is called expand behavior.

Responsive Adjustments: 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.

Column Alignment: Column alignment is used to align the flex grid columns along the horizontal or vertical axis in the parent row. By default, all the flex grid columns are aligned to the left and it can be overridden with the .align-[dir] class to the flex parent class.

Collapse/Uncollapse Rows: Foundation CSS Flex Grid Collapse/Uncollapse Rows uses media query size to remove the padding. By using this, we can collapse(remove)/uncollapse(show) column padding.

Block Grids: In Foundation CSS, Flex Grid Block is used to specify the column width at the row level instead of at the individual level.

Example 1: This example illustrates the use of Flex Block Grids.

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <title>Foundation CSS Flex Grid Block</title> 
    
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" 
        crossorigin="anonymous"> 
    
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" 
        crossorigin="anonymous"> 
    
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" 
        crossorigin="anonymous"> 
    
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
        crossorigin="anonymous"> 
    
    <script crossorigin="anonymous" 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> 
        
        <h3>Foundation CSS Flex Grid Block</h3> 
        
        <div class="row small-up-1 medium-up-2 large-up-3"> 
            <div class="column callout" style="background-color:rgb(255, 111, 0)"> 
                GFG 
            </div> 
            <div class="column callout" style="background-color:rgb(0, 255, 191)"> 
                GFG 
            </div> 
            <div class="column callout" style="background-color:rgb(255, 0, 81)"> 
                GFG 
            </div> 
        </div>   
    </center> 
    <script> 
        $(document).ready(function () { 
           $(document).foundation(); 
        }) 
    </script> 
</body>   
</html>

Output:

Block grid

Example 2: This example illustrates the use of Flex Grid Column Alignment. The following code demonstrates the align-center class.

HTML

<!DOCTYPE html> 
<html> 
<head> 
     <!--Foundation CSS CDN-->
     <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
           crossorigin="anonymous"> 
     <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
     <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css"
           crossorigin="anonymous"> 
     <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
     <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" 
           crossorigin="anonymous"> 
     <title>Foundation CSS Flex Grid Column Alignment</title> 
</head> 
<body> 
     <h1 style="color: green">GeeksforGeeks</h1> 
     <h3 class="text-center">align-center Class</h3> 
     <div class="flex-container row align-center margin-2" 
          style="background-color: #abab23"> 
        <div class="column" style="background-color:#66a1ff">GFG</div> 
        <div class="column" style="background-color:#b8652e">GFG</div> 
        <div class="column" style="background-color:#8f0099">GFG</div>  
     </div> 
    <pre class="margin-left-3">Columns are aligned to center.</pre> 
</body> 
</html>