Foundation Tutorial
Foundation General
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Foundation - Kitchen Sink
- Foundation - Starter Projects
- Foundation - Installation
- Foundation - Overview
- Foundation - Home
Foundation General
- Foundation - Plugins
- Foundation - Media
- Foundation - Containers
- Foundation - Navigation
- Foundation - Basic Controls
- Foundation - Typography Helpers
- Foundation - Base Typography
- Foundation - Visibility Classes
- Foundation - Forms
- Foundation - Flex Grid
- Foundation - The Grid
- Foundation - Media Queries
- Foundation - JavaScript Utilities
- Foundation - JavaScript
- Foundation - Sass
- Foundation - Global Styles
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Foundation - The Grid
Foundation - The Grid
Description
Foundation grid system scales up to 12 columns through the page. Grid systems are used to create page layouts through a series of rows and columns that house your content.
Grid Options
The following table tells briefly about how the Foundation grid system works in multiple devices.
| Small devices Phones(<640px) | Medium devices Tablets(>=640px) | Large devices Laptops & Desktops(>=1200px) | |
|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Class prefix | .small-* | .medium-* | .large-* |
| Number of columns | 12 | 12 | 12 |
| Nestable | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes |
Basic Structure of a Foundation Grid
The following is the basic structure of a Foundation grid −
<span class = "row"> <span class = "small-*"></span> <span class = "medium-*"></span> <span class = "large-*"></span> </span> <span class = "row"> ... </span>
First, create a row class to create horizontal groups of columns.
Content should be placed within the columns, and only columns may be the immediate children of rows.
Grid columns are created by specifying the number of twelve available columns you wish to span. For example, for four equal columns we would use .large-3
The following are the three classes used in the Foundation grid system −
| Sr.No. | Basic Grid classes & Description |
|---|---|
| 1 |
The large-* classes is used for the large devices. |
| 2 |
The medium-* class is used for the medium devices. |
| 3 |
small-* class is used for the small devices. |
Advanced Grid
The following are the advanced grid formats used in Foundation.
| Sr.No. | Advanced Grids & Description |
|---|---|
| 1 |
The column and row classes are used on the same element to get the full width column to use as a container. |
| 2 |
We can nest the grid columns inside another columns. |
| 3 |
Using large-offset-* or small-offset-* class, you can move the columns to the right. |
| 4 |
Foundation floats the last element automatically to the right when the rows do not include columns up to 12. |
| 5 |
Using the media query size, the collapse and uncollapse classes are included to the row element to show the paddings. |
| 6 |
By including the class small-centered in the column, you can make the column at the center. |
| 7 |
Source ordering class is used to shift the columns between the breakpoint. |
| 8 |
Block-grid is used to sppt the content. |
Building Semantically
Using the set of SASS mixins, a grid CSS is generated which is used to build your own semantic grid. For more information
SASS Reference
The following are the SASS reference for grid used in Foundation.
| Sr.No. | Basic Grids & Description |
|---|---|
| 1 |
Using the sass variables we can modify the default styles of this component. |
| 2 |
The final CSS output is build using the mixin. |