Foundation Grid System

The Foundation grid system has 12 columns. If you don't need 12 columns, you can merge some columns to create columns with a larger width. !(#) Foundation's grid system is responsive. Columns automatically adjust their size based on the screen size. On large screens, they might be three columns; on small screens, they might become three single columns, stacked in order. * * * ## Grid Columns The Foundation grid system has three types of columns: * `.small` (Mobile phones) * `.medium` (Tablet devices) * `.large` (Computer devices: Laptops, Desktops) The above classes can be combined to create more flexible layouts. * * * ## Basic Grid Structure Here is an example of a basic Foundation grid structure: ### Example

...

First, create a row (

). This is a horizontal vertical column. Then add the column quantity specification using the `small-num`, `medium-num`, and `large-num` classes. Note: The sum of the column quantities num must equal 12: ### Example

.small-12 yellow

.small-8 beige

.small-4 gray

.small-8 .large-9 pink

.small-4 .large-3 orange

[Try it Out »](#) In the example, the

class in the first row is `.small-12`, which creates 12 columns (100% width). The second row creates two columns, the width of `.small-4` is 33.3%, and the width of `.small-8` is 66.6%. In the third row, we added two extra columns (`.large-3` and `.large-9`). This means that on a large screen size, the columns will change to a ratio of 25% (`.large-3`) and 75% (`.large-9`). At the same time, we also specified the column ratio on small screens as 33% (`.small-4`) and 66% (`.small-8`). This combination approach is very helpful for displaying different effects on different screens. ## Grid Options The following table summarizes the Foundation grid system behavior across multiple devices: | | Small Devices Phones (=40.0625em (640px)) | Large Devices Laptops & Desktops (>=64.0625em (1025px)) | | --- | --- | --- | --- | | **Grid Behavior** | Always horizontal | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | | **Class Prefix** | .small-* | .medium-* | .large-* | | **Number of Classes** | 12 | 12 | 12 | | **Nestable** | Yes | Yes | Yes | | **Offsets** | Yes | Yes | Yes | | **Column Ordering** | Yes | Yes | Yes | * * * ## Widescreen The maximum grid (`.row`) width is 62.5rem. On widescreen, when the width is greater than 62.5rem, the columns will not span the width of the page, even if the width is set to 100%. But you can reset the max-width via CSS: ### Example .row { max-width: 100%; } [Try it Out »](#) If you use the default max-width, but want the background color to span the entire page width, you can wrap the entire container with a `.row` and specify the background color you need: ### Example

.small-6

[Try it Out »](#)

YouTip

Foundation Grid System

📂 Categories