Foundation CSS Flex Grid Advanced Sizing

Last Updated : 29 Mar, 2022

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. 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 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. In this article, we will discuss Flex Grid Advanced Sizing in Foundation CSS.

Foundation CSS Flex Grid Advanced Sizing Class:

columns: This class is used to create the columns.
shrink: This class is used to shrink the column. It will only take the horizontal space its contents are needed.

Syntax:

<div class="row">
  <div class="columns small-5">
    ...
  </div>
  <div class="columns">
    ...
  </div>
  ...
</div>

Example: The following code demonstrates the Foundation CSS Flex Grid Advanced Sizing.

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
  <title> Foundation CSS Flex Grid Advanced Sizing </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"> 
</head> 
  
<body> 
    <center> 
      <h2 style="color:green;"> GeeksforGeeks </h2> 
      <h3> Foundation CSS Flex Grid Advanced Sizing </h3> 
    </center> 
  
    <div class="row"> 
      <div class="columns small-5" 
           style="background-color:#8bd6ee"> 
         5 columns 
      </div> 
      <div class="columns" 
           style="background-color:#f3ab7c"> 
         Remaining space 
      </div> 
      <div class="columns" 
           style="background-color:#fd1919"> 
         Remaining space 
      </div> 
    </div> <br> 
  
    <div class="row"> 
        <div class="columns shrink" 
             style="background-color:#f387ea"> 
          This is shrink 
        </div> 
        <div class="columns" 
             style="background-color:#69e989"> 
          Remaining 
        </div> 
    </div> 
</body> 
</html> 