1. Home
  2. Foundation grid system

The best Foundation grid system Tutorial In 2024, In this tutorial you can learn Grid Column,The basic structure of the grid,Grid Options,Widescreen,

Foundation grid system

Foundation for the 12 grid system.

If you do not have 12, you can merge a number of columns, create a series of greater width.

Foundation of the grid system is responsive. Column will automatically resize based on the screen size. On a large screen, it may be three, the small screen size, it could be three separate, sequential.

Grid Column

Foundation grid system has three columns:

  • .small (mobile terminal)
  • .medium (tablet)
  • .large (computer equipment: notebook, desktop)

Above classes can be combined to create a more flexible layout

The basic structure of the grid

The following are the basic grid structure instance Foundation:

Examples

<Div class = "row">
<Div class = "small | medium | large- num columns"> </ div>
</ Div>
<Div class = "row">
<Div class = "small | medium | large- num columns"> </ div>
<Div class = "small | medium | large- num columns"> </ div>
<Div class = "small | medium | large- num columns"> </ div>
</ Div>
<Div class = "row">
/en.
</ Div>

First, create a row ( <div class="row"> ). This is a level of vertical columns. Then add the number of columns described small- num , medium- num and large- num class. Note: The number of columns num must add up to 12:

Examples

<Div class = "row">
<Div class = "small-12 columns"> .small-12 yellow </ div>
</ Div>
<Div class = "row">
<Div class = "small-8 columns"> .small-8 beige </ div>
<Div class = "small-4 columns"> .small-4 gray </ div>
</ Div>
<Div class = "row">
<Div class = "large-9 small-8 columns"> .small-8 .large-9 pink </ div>
<Div class = "large-3 small-4 columns"> .small-4 .large-3 orange </ div>
</ Div>

Example, the first line of the <div> class .small-12 , which creates 12 (100% width).

The second line creates two columns, .small-4 width is% 33.3, .small-8 width of 66.6%.

The third line we added two extra columns ( .large-3 and .large-9 ). This means that if the large screen size, the column will become% 25 ( .large-3 )% and 75 ( .large-9 ratio) of. We also specify the proportion of the small screen above the% 33 ( .small-4 )% and 66 ( .small-8 ). Such combinations for different screen display is very helpful.

Grid Options

The following table summarizes the Foundation explained grid system on multiple devices:

Small equipment
Phones (<40.0625em (640px)) 		Moderate equipment
Tablets (> = 40.0625em (640px)) 		Large equipment
Laptops & Desktops (> = 64.0625em (1025px))
Grid Behavior It has been the level of Began to collapse, break above horizontal Began to collapse, break above horizontal
Class prefix .small- * .medium- * .large- *
Number of classes 12 12 12
Can be embedded Yes Yes Yes
Offset Yes Yes Yes
Column sorting Yes Yes Yes

Widescreen

Grid maximum ( .row ) width 62.5rem. On widescreen, when the width is greater than 62.5rem, the column does not span the width of the page, even if the width is set to 100%. But you can reset via CSS max-width:

Examples

<Style>
.row {
max-width: 100%;
}
</ Style>

If you use the default max-width, but want the background color across the entire width of the page, you can use .row wrap the entire container, and you need to specify a background color:

Examples

<Div style = "background-color: coral; padding: 25px;">
<Div class = "row">
<Div class = "small-6 columns" style = "background-color: yellow;"> small-6 </ div>.
<Div class = "small-6 columns" style = "background-color: pink;"> small-6 </ div>.
</ Div>
</ Div>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

Foundation grid system
10/30