Foundation CSS XY Grid Importing
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/foundation-sites@6.7.4/dist/css/foundation.min.css”> <script src=”https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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= <!-- Compressed JavaScript --> <script src= </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= <!-- Compressed JavaScript --> <script src= </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
Please Login to comment...