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 >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
< link rel = "stylesheet" href =
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 >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
< link rel = "stylesheet" href =
crossorigin = "anonymous" >
< link rel = "stylesheet" href =
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 >
|
Output:
Reference: https://get.foundation/sites/docs/flex-grid.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...