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 this 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 of ui 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

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 a divided 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 a right 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

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

Responsive Patterns

Doubling

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

column

Stackable

You can set columns to stack on mobile

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

mobile only column

column