Foundation CSS XY Grid Importing - Coding

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 XY Grid system is a 12-column grid system based on flexbox. The XY grid structure is similar to that of the float grid-like bootstrap, or something like that.

Importing: XY grid is the default foundation grid. It is always available in the default CDN link of the foundation.

CDN link:

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css”> <script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js”> </script>

let us see an example with XY grid importing.

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS XY Block Grids</title> 
  
    <!--XY GRID IMPORTING-->
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body style="margin-inline:10rem;"> 
  
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
  
    <h3>Foundation CSS XY Grid importing </h3> 
  
    <div class="grid-x grid-padding-x  
               small-up-2 medium-up-4  
               large-up-6"> 
        <div class="cell" style="background-color:rgb(228, 139, 14)"> 
            XY Grid 
        </div> 
        <div class="cell" style="background-color:rgb(14, 179, 105)"> 
            XY Grid 
        </div> 
        <div class="cell" style="background-color:rgb(239, 8, 181)"> 
            XY Grid 
        </div> 
        <div class="cell" style="background-color:rgb(126, 253, 15)"> 
            XY Grid 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: This is one more example of XY grid importing.

HTML

<!DOCTYPE html> 
<html> 
    
<head> 
    <title>Foundation CSS XY Grid Auto Sizing</title> 
     <!--XY GRID IMPORTING-->
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"> 
    
    <!-- Compressed JavaScript -->
   <script src= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> 
    </script> 
     
</head> 
    
<body> 
    <h1 style="text-align:center; color:green"> 
        GeeksforGeeks 
    </h1> 
    
    <div class="grid-x grid-margin-x" 
         style="margin:20px; border:2px solid black;" > 
        <div class="cell small-4 customClass1" 
            style="background-color:aqua ;"> 
            GFG 
        </div> 
        <div class="cell customClass2 large-auto" 
            style="background-color:rgb(170, 211, 9) ;"> 
            Foundation CSS XY Grid importing 
        </div> 
    </div> 
</body>   
</html> 

Output:

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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Grid Negative Margins
Foundation CSS Flex Grid Importing
Foundation CSS Float Grid Importing
Bulma Container Absolute maximum width
Bulma Spacing Configuration

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12