Posts in current category
May 04, 2021 13:00 Foundation5
The Foundation grid system is 12 columns.
If you don't need 12 columns, you can merge some columns to create some columns that are larger and wider.
Foundation's grid system is responsive. C olumns are automatically resized based on screen size. On a large screen, it could be three columns, and on a small screen, it could be three single columns, in order.
The Foundation grid system has three columns:
.large(computer equipment: notebook, desktop)
These classes can be used together to create a more flexible layout
Here are some basic examples of Foundation grid structures:
First, create a line
his is a horizontal vertical column. T
hen add the number of columns
Note: The number of
must add up to 12:
In the instance, the first row of the class
which creates 12 columns (100% width).
The second row creates two columns,
with a width of 33.3%
with a width of 66.6%.
In the third row we added two additional columns
his means that if you are at a large screen size, the columns become 25%
e also specified a ratio of 33%
This combination is very helpful for different screen displays.
The following table summarizes the description of the Foundation grid system on multiple devices:
Phones (<40.0625em (640px))
Tablets (>=40.0625em (640px))
Laptops & Desktops (>=64.0625em (1025px))
|Grid behavior||has always been horizontal||Start with folding, above the break point is horizontal||Start with folding, above the break point is horizontal|
|The number of classes||12||12||12|
|Can be embedded||Yes||Yes||Yes|
width of the grid is 62.5rem. O
n a 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 max-width through CSS:
If you use the default max-width, but want the background color to span the entire page width,
and specify the background color you need: