Why Include Row Markup?
It's often easier to have dynamic content output without nested rows, but using row wrappers is the only way for variations like equal height, celled and vertically divided to function correctly.
Introduction
Why Use Grids?
A grid is a structure, with a very rich history used to align negative space in your design.
Using a grid makes content appear to flow naturally on your page, and allows you to quickly adjust layouts without assigning specific sizes directly to content elements, letting you rapidly prototype and design your page.
Grid Row Spacing
Grid columns have vertical spacing above and below each column to create vertical flow between columns. Consecutive grids will automatically preserve row spacing between grids.
How To Use
Column Flow
A grid does not necessarily need to specify rows. If you include columns as direct child of ui grid content will automatically flow to the next row when all the grid columns are taken in the current row.
Column Widths
Column widths can be specified using (x) wide class names, each row will add up to 16 columns, if a column cannot fit it will automatically flow to the next row
Column Count
Grid or individidual grid rows can be divided evenly using (x) column grid or (x) column row
Centering Content
If a row does not take up all sixteen grid columns, you can use a ui centered grid, centered row, or centered column to center the column contents inside the grid.
Specifying Alignment
You can specify alignment using alignment variations on a grid, row, or column level.
Right floated left aligned column
Left floated right aligned column
Center aligned row
Center aligned row
Right Aligned Grid
Rows
Using Rows
Specifying wrapping row elements allows you to manually control line breaks for rows, and use additional row variations.
Responsive Page Grids
Adding Page Gutters
A page grid is a type of grid designed to provide a responsive container for wrapping the entire contents of your page.
Page Grid Breakpoints
Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will constantly adjust as the browser width changes, giving you the largest possible space for each breakpoint.
Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.
| Name | Breakpoint | Page Gutter | Responsive Class | Variable |
|---|---|---|---|---|
| Mobile | Below 768px | 1rem | mobile only, (x) wide mobile | $mobileBreakpoint |
| Tablet | Above 768px and below 992px | 8% | tablet only, (x) wide tablet | $tabletBreakpoint |
| Computer | Above 992px | 13% | computer only, (x) wide computer | $computerBreakpoint |
| Large Screen | Above 1400px | 18% | (x) wide large screen | $largeMonitorBreakpoint |
| Widescreen Monitor | Above 1920px | 23% | (x) wide widescreen | $widescreenBreakpoint |
Responsive Patterns
Semantic includes two common patterns for adjusting grids on different devices.
A doubling grid automatically adjusts column width on each device jump. Usually this relationship is an exact doubling of columns, however some adjustments have been made for display flexibility. For example, six column computer grid, will jump to a three column grid on tablet, and a two column on mobile.
A stackable grid will always force a layout to use one column on mobile. These two patterns can also be used together to, for example, force a four column grid to one on mobile.
| Doubling Columns | Tablet | Mobile |
|---|---|---|
| 16 Columns | 8 | 4 |
| 15 Columns | 7 | 4 |
| 14 Columns | 7 | 4 |
| 13 Columns | 7 | 3 |
| 12 Columns | 6 | 3 |
| 11 Columns | 5 | 3 |
| 10 Columns | 5 | 3 |
| 9 Columns | 4 | 3 |
| 8 Columns | 4 | 2 |
| 7 Columns | 3 | 2 |
| 6 Columns | 3 | 2 |
| 5 Columns | 3 | 2 |
| 4 Columns | 2 | 2 |
| 3 Columns | 2 | 2 |
| 2 Columns | 8 | 2 |
| 1 Columns | 8 | 1 |
Doubling Grid
A doubling grid will generally double column widths for each device jump.
Stackable Grid
Stackable grids will not adjust their column width until mobile, where all grid columns will become full width
Formatting Grids
Content Inside Grids
Previous examples were shaded to help show the physical layout of grids, but grids themselves do not provide any styles.
In order to create content segments inside a grid you must specify individual ui elements for example ui segments.
Nesting Grids
You can include grids even inside other grids, this can be useful for things like dividing rows inside of a page grid.
Full Width Backgrounds
Grids use negative margins to remove first and last column margins, this means you cannot directly apply a background color on a grid. To add a background try wrapping your grid inside another container, for example a ui segment.
Full Width Background
First section of content
Full Width Heading
Second section of content
Column Background
Third section of content
Column Background
Fourth section of content
Row and Column Backgrounds
If you need to specify colors on grid rows of columns, you can use a color variation
Features
First section of content
Statistics
First section of content
Headline
Second section of content
Sitemap
Second section of content
Contact Us
Second section of content
Types
Page Grid
A page grid is used to layout page contents into a grid system.
Divided Grid Requires Rows
A grid can have dividers between its columns
Vertically Divided Grid Requires Rows
A grid can have dividers between rows
Celled Grid Requires Rows
A grid can have rows divided into cells
Internally Celled Grid Requires Rows
A grid can have rows divisions only between internal rows
Elements
Rows
A row is used to create vertical padding between groups of columns on a page.
Columns
Columns each contain gutters giving them equal spacing from other columns.
Variations
Grid
Column Count
A grid can have a different number of columns per row
Padded
A grid can preserve its vertical and horizontal gutters on first and last columns
The following grid has vertical and horizontal gutters
The following grid has vertical gutters.
The following grid has horizontal gutters
Relaxed
A grid can increase its gutters to allow for more negative space
Centered
A grid can have its columns centered
Equal Width Flexbox
A row can automatically resize all undeclared elements to split the available width evenly
1
2
3
1
2
3
4
1
2
3
1
2
Equal Height Flexbox
A row can specify that it is equal height so all of its columns appear the length of its longest column.
1
1
2
1
2
3
1
1
2
1
2
3
1
2
1
2
Doubling
A grid can double its column width on tablet and mobile sizes
Stackable Grid
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
Text Alignment
A grid can specify its text alignment
Vertical Alignment
A grid can specify its vertical alignment to have all its columns vertically centered.
Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other. Justified content fits exactly inside the grid column, taking up the entire width from one side to the other.
Rows
Responsive Visibility
A grid can have its columns, or rows only show content for computer, tablet, or mobile.
Mobile
Mobile
Computer
Tablet and Mobile
All Sizes
All Sizes
Computer
Computer
Computer
Computer
Tablet
Tablet
Tablet
This is a short row
This is a short row
This is a very long row with lots of text in it and way more text than the other rows
It might even span for multiple paragraphs.
Columns
Floating
A column can be "floated" to either the left or right of its row.
Column Width
A column can vary in width taking up more than a single grid column.
Responsive Width
A grid row can specify a width for a specific device