Using Grids

Container

A container is a fixed width element that wraps your site's content. It remains a constant size and uses margin to center. Containers are the simplest way to center page content inside a grid.

Text Container

Sometimes you just need to put a single column of centered text on a page. A text container is a special type of container optimized for a single flowing column of text, like these instructions on this page.

Text containers do not need to use grids and help simplify basic page layouts.

Grid Content

Column Flow

A grid does not necessarily need to specify rows. If you include columns as direct child ofui grid content will automatically flow to the next row when all the grid columns are taken in the current row.

Clearing Rows

Adding row wrappers allow you to manually specify you want a new row to begin.

Specifying Row Width

Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.

column
column
column
column
column
column

Specifying Column Width

You can also specify column widths for each column individually.

four wide column
eight wide column
four wide column

Special Variations

Some special variations that format grids like tables require you to specify rows. For example adivided grid or a celled grid requires row wrappers.

Celled Grid
Internally Celled Grid
Divided Grid
Vertically Divided Grid

Adjusting Grids

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.

Floating Rows

Since Semantic UI's grid is based on flex box, a left floated item should come first, and aright floated item last in its row.

Left floated
Right floated

Text Alignment

You can specify text alignment using alignment variations on a grid, row, or column level.

right aligned column
left aligned column
center aligned row
center aligned row
right aligned column

Vertical Alignment

You can specify vertical alignment on a grid, row, or column level.

Equal Width Columns

Specifying an equal width grid will automatically determine column sizes to fit evenly inside one row.

column
column
column
column
column
column
column

Responsive Patterns

Doubling

You can set columns to double in width at each device jump.

column
column
column
column
column

Stackable

You can set columns to stack on mobile.

column
column
column

Responsive Width Adjustments

You can specify columns to appear at different widths on different screens.

Specifying Device Visibility

You can specify columns to appear only a particular screen.

ten wide column computer only
six wide column computer only
sixteen wide column mobile only
computer only row
computer only row
computer only row
mobile only column
mobile only column
column
column
LayoutsSource