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.

Specifying Column Width

You can also specify column widths for each column individually

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.

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.

Text Alignment

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

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

Responsive Patterns

Doubling

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

Stackable

You can set columns to stack on mobile

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