Open In App

Foundation CSS Float Grid Importing

Improve
Improve
Like Article
Like
Save
Share
Report

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.

The Float Grid system is a 12-column grid system based on flexbox.

Importing:  We need to some changes to the CDN link of the foundation. In the CDN link replace “foundation-float.css” in place of “foundation.css”

 

CDN Link:

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

Example 1: The following code demonstrates an example of float grid importing.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- Foundation CSS CDN link -->
    <link rel="stylesheet" href=
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
  
    <!-- Float grid importing -->
    <link rel="stylesheet" href=
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .row {
            border:2px solid red;
        }
        .bg {
            text-align:center;
        }
    </style>
</head>
<body>
    <h2 style="color:green;text-align:center">
        GeeksforGeeks
    </h2>
    <p class="bg">
       <strong>Foundation CSS Float Grid importing</strong>
    </p
      
    <div class="row">
        <div class="columns small-2" 
            style="background-color:yellow;">
            GFG
        </div>
        <div class="columns small-10" 
            style="background-color:rgb(9, 249, 97);">
            FLOAT GRID
        </div>
    </div>
    <div class="row">
        <div class="columns small-3"  
            style="background-color:rgb(56, 11, 220);">
            GFG
        </div>
        <div class="columns small-9" 
            style="background-color:rgb(14, 218, 241);">
            FLOAT GRID
        </div>
    </div>
      
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

 

Example 2: The following code demonstrates another example of float grid importing.

HTML




<!DOCTYPE html>
<html>
<head>
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href=
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
  
    <!-- float grid importing -->
    <link rel="stylesheet" href=
      
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .row {
            border:2px solid black;
        }
        .bg {
            text-align: center;
        }
    </style>
</head>
<body>
    <h2 style="color:green;text-align:center">
        GeeksforGeeks
    </h2>
    <p class="bg"
        <strong>Foundation CSS Float Grid importing</strong>
    </p>    
    
    <div class="row">
        <div class="columns medium-3" 
            style="background-color:rgb(236, 23, 41);">
            GFG
        </div>
        <div class="columns medium-3" 
             style="background-color:rgb(212, 14, 152);">
             GFG
        </div>
        <div class="columns medium-3" 
             style="background-color:rgb(96, 14, 226);">
             GFG
        </div>
    </div>
    <div class="row">
        <div class="columns medium-3"  
            style="background-color:rgb(0, 183, 255);">
            GFG
        </div>
        <div class="columns medium-3" 
            style="background-color:rgb(0, 255, 106);">
            GFG
        </div>
        <div class="columns medium-3 end" 
              style="background-color:rgb(255, 179, 0);">
            GFG 
        </div>
    </div>    
    <script>
        $(document).foundation();
    </script>
</body>
</html>


Output:

 

Reference: https://get.foundation/sites/docs/grid.html



Last Updated : 31 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads