- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Flex Grid Basics
Description
The Flex grid structure is similar to that of float grid. The .row class is used for the row and .column is used for the column. For different screen sizing the same classes of grids are used in flex grid also i.e. small-*, medium-* and large-*.
Example
The following example demonstrates the use of Basic flex grid in Foundation −
<!DOCTYPE html> <html> <head> <title>Foundation Template</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script> </head> <body> <h2>Example of Flex Grid</h2> <div class = "row"> <div class = "small-4 columns" style = "background-color:#8BD6EE;">Small 4</div> <div class = "small-4 columns" style = "background-color:#FF6347;">Small 4</div> <div class = "small-4 columns" style = "background-color:#8BD6EE;">Small 4</div> </div> <div class = "row"> <div class = "medium-6 large-9 columns" style = "background-color:#C0B0F0;"> Medium 6/ Large 9 </div> <div class = "medium-6 large-3 columns" style = "background-color:#7B68EE;"> Medium 6/ Large 3 </div> </div> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code flex-grid-basic.html file.
Open this HTML file in a browser, an output is displayed as shown below. It is displayed on a medium sized screen.
foundation_flex_grid.htm
Advertisements
To Continue Learning Please Login
Login with Google