Foundation CSS Flex Grid Importing

Last Updated : 31 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.

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

Importing:

We need to some changes to the CDN link of the foundation. In the CDN link replace “foundation-flex.css” in place of “foundation.css“.
In your main sass file set $xy-grid to “false”.

CDN Link:

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-flex.min.css” crossorigin=”anonymous”>

Example 1: This example demonstrates flex grid importing using the CDN.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <!--Import flex grid cdn-->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-flex.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"> 
    <!-- 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"> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" 
          crossorigin="anonymous">   
</head> 
<body> 
    <h1 class="text-center" style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3 class="text-center"> 
        flex grid importing 
    </h3> 
    <div class="flex-container row margin-2" 
        style="background-color:#09e4f4"> 
        <div class="column small-2" 
            style="background-color:#cb5a13"> 
            GFG 
        </div> 
        <div class="column small-2" 
            style="background-color:#0648d6"> 
            GFG 
        </div> 
        <div class="column small-2" 
            style="background-color:#f009c5"> 
            GFG 
        </div>  
    </div>  
</body> 
</html> 

Output:

Example 2: The following is another example of flex grid importing.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <!--flex grid cdn importing-->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-flex.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"> 
    <!-- 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"> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" 
          crossorigin="anonymous"> 
    
</head> 
<body> 
    <h1 class="text-center" style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3 class="text-center"> 
        flex grid importing 
    </h3> 
    <div class="row" 
        style="border:2px solid rgb(5, 123, 219);"> 
        <div class="columns small-4  
            large-offset-2"  
            style="background-color:aqua"> 
            GFG 
        </div> 
        <div class="columns small-4" 
            style="background-color:rgb(111, 255, 0)"> 
            GFG 
        </div> 
    </div>  
</body> 
</html> 