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.
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 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.
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.
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.
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.
ui grid container is the best way to include top-level page content inside a grid.
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.
Since columns use padding to create gutters, content stylings should not be applied directly to columns, but to elements inside of columns.
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
Row wrappers allow you to apply variations to a group of columns.
Row wrappers will automatically clear previous columns, making them useful when using
Additionally, some types of grids, like
celled require row wrappers to apply formatting correctly.
Grids can be placed inside of other grids, letting you sub-divide columns.
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
Automatic Column Count
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.
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.
A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.
stackable grid will automatically stack rows to a single columns on mobile devices
Semantic includes special
reversed variations that allow you to reverse the order of columns or rows by device
doubling grid will double column widths for each device jump.
Although design patterns like
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.
A basic grid
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
A row is a horizontal grouping of columns
Columns each contain gutters giving them equal spacing from other columns.
A column can sit flush against the left or right edge of a row
A column can vary in width taking up more than a single grid column.
A grid can have a different number of columns per row
A grid can automatically resize all elements to split the available width evenly
A row can stretch its contents to take up the entire column height
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
A grid can increase its gutters to allow for more negative space
A row or column can be colored
A grid can have its columns centered
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.
A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.
A grid can double its column width on tablet and mobile sizes
A grid can have its columns stack on-top of each other after reaching mobile breakpoints
A grid or row can specify that its columns should reverse order at different device sizes
A columns or row can appear only for a specific device, or screen sizes
A column can specify a width for a specific device