Introduction
Grids
A grid is a structure with a long history used to align negative space in designs.
Using a grid makes content appear to flow more naturally on your page.
Columns
Grids divide horizontal space into indivisible units called "columns". All columns in a grid must specify their width as proportion of the total available row width.
All grid systems choose an arbitrary column count to allow per row. Semantic's default theme uses 16 columns.
The example below shows four four wide columns will fit in the first row, 16 / 4 = 4, and three various sized columns in the second row. 2 + 8 + 6 = 16
The default column count, and other arbitrary features of grids can be changed by adjusting Semantic UI's underlying theming variables.
Rows
Rows are groups of columns which are aligned horizontally.
Rows can either be explicit, marked with an additional row element, or implicit, automatically occurring when no more space is left in a previous row.
After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm.
Gutters
Grid columns are separated by areas of white space referred to as "gutters". Gutters improve legibility by providing, negative space between page elements.
Gutters remain a constant size regardless of the width of the grid, or how many columns are in a row. To increase the size of gutters in a particular grid, you can use a relaxed grid variation.
Negative Margins
Since all grid columns include gutters, grids use negative margins to make sure that the first and last columns sit flush with content outside the grid.
In the following example, you can see even though the top row has padding, the attached button still sits flush with the edge of the grid.
In some cases, like when a column or row is colored, you may want to avoid using negative margins. You can do this by using a padded grid variation.
Page Grids
Grids are fluid and will automatically flow in size to take the maximum available width.
Containers are elements designed to limit page content to a reasonable maximum width for display based on the size of the user's screen.
Using a ui grid container is the best way to include top-level page content inside a grid.
Columns
Automatic Flow
Most grids do not need to specify rows. Content will automatically flow to the next row when all the grid columns are taken in the current row.
Column Content
Since columns use padding to create gutters, content stylings should not be applied directly to columns, but to elements inside of columns.
Column Widths
Column widths can be specified using (x) wide class names. If a column cannot fit in a row it will automatically flow to the next row
Rows
Grouping
Row wrappers allow you to apply variations to a group of columns.
Clearing Content
Row wrappers will automatically clear previous columns, making them useful when using floated variations.
Special Grids
Additionally, some types of grids, like divided or celled require row wrappers to apply formatting correctly.
Varying Grids
Nesting Grids
Grids can be placed inside of other grids, letting you sub-divide columns.
Colored
Grids can use named colors variations to add background colors, but only with padded grid that do not include negative margins.
To include a color that is not available in the default palette its perfectly fine to use CSS
Olive
Black
Custom Row
Black
Olive
Automatic Column Count
The equal width variation will automatically divide column width evenly. This is useful with dynamic content where you do not know the column count in advance.
Centering Content
If a row does not take up all sixteen grid columns, you can use a centered variation to center the column contents inside the grid.
Significant Word Order
Grids include many variations for adjusting things like vertical or horizontal alignment, text alignment, or default gutter sizes.
Some multi-word variations, like left floated or right aligned are word-order dependent and require you to use adjacent class names.
Left floated right aligned column
Right floated left aligned column
Center aligned row
Center aligned row
Right Aligned Grid
Responsive Grids
Containers
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
Reverse Order
Semantic includes special reversed variations that allow you to reverse the order of columns or rows by device
First
Second
Third
Manual Tweaks
Although design patterns like doubling or stackable are useful at simplifying responsive styling, you can also manually tweak device presentation by specifying (x) wide device or device only columns or rows.
Types
Divided Requires Rows
A grid can have dividers between its columns
Vertically Divided Requires Rows
A grid can have dividers between rows
Celled Requires Rows
A grid can have rows divided into cells
Internally Celled Requires Rows
A grid can have rows divisions only between internal rows
Content
Rows
A row is a horizontal grouping of columns
Columns
Columns each contain gutters giving them equal spacing from other columns.
Variations
Floated
A column can sit flush against the left or right edge of a row
Column Width
A column can vary in width taking up more than a single grid column.
Column Count
A grid can have a different number of columns per row
Equal Width
A grid can automatically resize all elements to split the available width evenly
1
2
3
1
2
3
4
1
2
3
1
2
Stretched
A row can stretch its contents to take up the entire column height
1
1
2
1
2
3
1
2
1
2
1
2
1
2
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
Colored
A row or column can be colored
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
Red
Orange
Yellow
Olive
Green
Teal
Blue
Violet
Purple
Pink
Brown
Grey
Black
Centered
A grid can have its columns centered
Text Alignment
A grid, row, or column can specify its text alignment
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.
Vertical Alignment
A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.
Responsive Variations
Doubling
A grid can double its column width on tablet and mobile sizes
Stackable
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
Reversed
A grid or row can specify that its columns should reverse order at different device sizes
Computer A Fourth
Computer A Third
Computer A Second
Computer A First
Computer B Fourth
Computer B Third
Computer B Second
Computer B First
Tablet Fourth
Tablet Third
Tablet Second
Tablet First
Mobile Fourth
Mobile Third
Mobile Second
Mobile First
Computer Row 4
Computer Row 3
Computer Row 2
Computer Row 1
Tablet Row 4
Tablet Row 3
Tablet Row 2
Tablet Row 1
Mobile Row 4
Mobile Row 3
Mobile Row 2
Mobile Row 1
Device Visibility
A columns or row can appear only for a specific device, or screen sizes
Large Screen
Large Screen
Widescreen
Widescreen
Mobile
Mobile
Computer
Tablet and Mobile
All Sizes
All Sizes
Computer
Computer
Computer
Computer
Tablet
Tablet
Tablet
Responsive Width
A column can specify a width for a specific device