HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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.
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 following are the basic grid structure instance Foundation:
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:
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.
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 |
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:
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: