Setting Up Grids

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. This can be useful when centering content with a ui centered grid.

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.

Specifying Column Count

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

Equal Width Columns

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

Individual Column Width

Specifying Device Visibility

The Semantic grid system has three tiers of classes: mobile (phones), tablet (tablets), computer (desktops and larger desktops) You can use nearly any combination of these classes to create more dynamic and flexible layouts

Breakpoints are 768px and below for mobile, 768-992px for tablet and 992px+ for computer

In these cases below, we'd like to recommend you to change size of your viewport or use right devices for responsiveness experience