Foundation CSS Flex Grid Collapse/Uncollapse Rows

Last Updated : 26 Apr, 2022

Foundation CSS is an open-source and free front-end framework that helps us in making responsive web designs. It is one of the most advanced CSS frameworks and it works on all devices providing us with a responsive grid and HTML and CSS UI components, templates, etc. It also gives some optional functionality provided by JavaScript Extensions. It also provides fast rendering on mobile devices because of the presence of the Fastclick.js tool.

Foundation CSS Flex Grid:

Flex Grid is nothing but a grid system that’s formed on the flex property that enables the responsive structure by creating the rows and columns. The .row class is used to make a row and the .column class is used to make columns. It also comes with features that are available in flexboxes like automatic stacking, source ordering, vertical alignment, and horizontal alignment.

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.

Used classes:

small-collapse: it collapses/removes the padding of the element it is added to when the screen size is small(320px-480px) or on mobile devices.
small-uncollapse: it uncollapses/shows the padding of the element it is added to when the screen size is small(320px-480px) or on mobile devices.
medium-collapse: it collapses/removes the padding of the element it is added to when the screen size is medium(769px-1024px) or on small screens/laptops.
medium-uncollapse: it uncollapses/shows the padding of the element it is added to when the screen size is medium(769px-1024px) or on small screens/laptops.
large-collapse: it collapses/removes the padding of the element it is added to when the screen size is large(1025px-1200px) or on desktop/large screens.
large-uncollapse: it uncollapses/shows the padding of the element it is added to when the screen size is large(1025px-1200px) or on desktop/large screens.

Syntax:

<div class="row class_name">
   <div class="columns">
         . . . . . .
   </div>
   <div class="columns">
         . . . . . .
   </div>
</div>

Example 1: The below code examples demonstrates the usage of small-collapse.

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 CSS CDN 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" /> 
    <!--Foundation JS CDN-->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
    <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> 
</head> 
  
<body> 
    <h1 class="text-center" style="color: #009900">GeeksforGeeks</h1> 
    <h3 class="text-center">small-collapse Class</h3> 
    <div class="row small-collapse medium-uncollapse  
        large-uncollapse margin-bottom-1" style="background: #ffffff"> 
        <div class="small-4 columns" 
            style="background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
        <div class="small-2 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">FOR</span> 
        </div> 
        <div class="small-6 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
    </div> 
      
    <pre class="text-center"> 
        Padding of the elements are removed when  
        the screen size is small 
    </pre> 
</body> 
  
</html> 

Output:

Example 2: The below code examples demonstrates the usage of small-uncollapse.

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 CSS CDN 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" /> 
    <!--Foundation JS CDN-->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
    <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> 
</head> 
  
<body> 
    <h1 class="text-center" style="color: #009900"> 
        GeeksforGeeks 
    </h1> 
      
    <h3 class="text-center"> 
        small-uncollapse Class 
    </h3> 
      
    <div class="row small-uncollapse medium-collapse  
        large-collapse margin-bottom-1"  
        style="background: #ffffff"> 
        <div class="small-4 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
        <div class="small-2 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">FOR</span> 
        </div> 
        <div class="small-6 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
    </div> 
      
    <pre class="text-center"> 
        Padding of the elements are shown  
        when the screen size is small 
    </pre> 
</body> 
  
</html> 

Output:

Example 3: The below code examples demonstrates the usage of medium-collapse.

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 CSS CDN 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" /> 
    <!--Foundation JS CDN-->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
    <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> 
</head> 
  
<body> 
    <h1 class="text-center" style="color: #009900"> 
        GeeksforGeeks 
    </h1> 
      
    <h3 class="text-center">medium-collapse Class</h3> 
      
    <div class="row medium-collapse small-uncollapse  
        large-uncollapse margin-bottom-1"  
        style="background: #ffffff"> 
        <div class="small-4 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
        <div class="small-2 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">FOR</span> 
        </div> 
        <div class="small-6 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
    </div> 
      
    <pre class="text-center"> 
        Padding of the elements are hidden  
        when the screen size is medium 
    </pre> 
</body> 
  
</html> 

Output:

Example 4: The below code examples demonstrates the usage of medium-uncollapse.

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 CSS CDN 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" /> 
    <!--Foundation JS CDN-->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
    <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> 
</head> 
  
<body> 
    <h1 class="text-center" style="color: #009900"> 
        GeeksforGeeks 
    </h1> 
  
    <h3 class="text-center">medium-uncollapse Class</h3> 
    <div class="row medium-uncollapse small-collapse  
        large-collapse margin-bottom-1"  
        style="background: #ffffff"> 
        <div class="small-4 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
        <div class="small-2 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">FOR</span> 
        </div> 
        <div class="small-6 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
    </div> 
      
    <pre class="text-center"> 
        Padding of the elements are shown  
        when the screen size is medium. 
    </pre> 
</body> 
  
</html> 

Output:

Example 5: The below code examples demonstrates the usage of large-collapse.

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 CSS CDN 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" /> 
    <!--Foundation JS CDN-->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
    <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> 
</head> 
  
<body> 
    <h1 class="text-center" style="color: #009900"> 
        GeeksforGeeks 
    </h1> 
  
    <h3 class="text-center">large-collapse Class</h3> 
    <div class="row large-collapse medium-uncollapse  
        small-uncollapse margin-bottom-1"  
        style="background: #ffffff"> 
        <div class="small-4 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
        <div class="small-2 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">FOR</span> 
        </div> 
        <div class="small-6 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
    </div> 
    <pre class="text-center"> 
        Padding of the elements are hidden  
        when the screen size is large. 
    </pre> 
</body> 
  
</html> 

Output:

Example 6: The below code examples demonstrates the usage of large-uncollapse.

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 CSS CDN 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" /> 
    <!--Foundation JS CDN-->
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"
        crossorigin="anonymous"></script> 
    <title>Foundation CSS Flex Grid Collapse/Uncollapse Rows</title> 
</head> 
  
<body> 
    <h1 class="text-center" style="color: #009900"> 
        GeeksforGeeks 
    </h1> 
  
    <h3 class="text-center">large-collapse Class</h3> 
    <div class="row large-uncollapse medium-collapse  
        small-collapse margin-bottom-1"  
        style="background: #ffffff"> 
        <div class="small-4 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
        <div class="small-2 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">FOR</span> 
        </div> 
        <div class="small-6 columns" style= 
            "background: #aae5aa; border: 5px solid black"> 
            <span class="text-center display-block" 
                style="background: #009933">GEEKS</span> 
        </div> 
    </div> 
      
    <pre class="text-center"> 
        Padding of the elements are shown  
        when the screen size is large. 
    </pre> 
</body> 
  
</html> 