Menu

Grid
A grid is used to harmonize negative space in a layout

Download

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 chooses 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.

Button before grid
Button after grid

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.

In version 1.x of Semantic UI page grid were used to contain the maximum width of grids holding page content. Page grid have been deprecated in favor for the simpler container element.

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.

Stackable

A stackable grid will automatically stack rows to a single columns on mobile devices

Reverse Order

Semantic includes special reversed variations that allow you to reverse the order of columns or rows by device

First
Second
Third

Doubling

A doubling grid will double column widths for each device jump.

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

Grid Flexbox

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

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 row can automatically resize all elements to split the available width evenly

1
2
3
1
2
3
4
1
2
3
1
2

Stretched

An 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 grid 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

A grid will round its columns to the closest reasonable value when doubling, for example a five column grid will use 2 mobile, 3 tablet, 5 desktop. To force 1 column on mobile you can add stackable

Stackable

A grid can have its columns stack on-top of each other after reaching mobile breakpoints

To see a grid stack, try resizing your browser to a small width

Reversed

A grid or row can specify that its columns should reverse order at different device sizes

Reversed grids are compatible with divided grids and other complex grid types.
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

See container documentation for information on breakpoint calculations
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

It's recommended to use a responsive pattern like doubling or stackable to reduce complexity when designing responsively, however in some circumstances specifying exact widths for screen sizes may be necessary.

Dimmer Message
Dimmer sub-header