Menu

Grid

A grid is used to harmonize negative space in a layout

Download

Introduction

Why Use Grids?

A grid is a structure, with a very rich history used to align negative space in your design.

Using a grid makes content appear to flow naturally on your page, and allows you to quickly adjust layouts without assigning specific sizes directly to content elements, letting you rapidly prototype and design your page.

All grid systems use an arbitrary column count. Semantic's default theme assumes 16 columns. This number can be adjusted in your project by adjust the @columnCount value in site.variables.

Grid Row Spacing

Grid columns have vertical spacing above and below each column to create vertical flow between columns. Consecutive grids will automatically preserve row spacing between grids.

The first and last row of columns will set flush with the edge of the grid. To allow first and last columns to have vertical spacing as well use a vertically padded grid variation. To allow horizontal gutters to exist as well use a padded grid
Button before grid
Button after grid

How To Use

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.

Column Widths

Column widths can be specified using (x) wide class names, each row will add up to 16 columns, if a column cannot fit it will automatically flow to the next row

If you create a grid with only one column, you do not need to specify width, it will automatically be assumed to be a sixteen wide column

Column Count

Grid or individidual grid rows can be divided evenly using (x) column grid or (x) column row

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.

Specifying Alignment

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

Word Order Requirements

Multi-word variations like right floated require you to specify both class names side-by-side, this helps preserve syntax when stacking variations like a right floated left aligned column

Right floated left aligned column
Left floated right aligned column
Center aligned row
Center aligned row
Right Aligned Grid

Rows

Using Rows

Specifying wrapping row elements allows you to manually control line breaks for rows, and use additional row variations.

Why Include Row Markup?

It's often easier to have dynamic content output without nested rows, but using row wrappers is the only way for variations like equal height, celled and vertically divided to function correctly.

Responsive Page Grids

Adding Page Gutters

A page grid is a type of grid designed to provide a responsive container for wrapping the entire contents of your page.

Page Grid Breakpoints

Semantic's page grid, by default, uses percentage values for page gutters. This means your page container will constantly adjust as the browser width changes, giving you the largest possible space for each breakpoint.

Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.

Name Breakpoint Page Gutter Responsive Class Variable
Mobile Below 768px 1rem mobile only, (x) wide mobile $mobileBreakpoint
Tablet Above 768px and below 992px 8% tablet only, (x) wide tablet $tabletBreakpoint
Computer Above 992px 13% computer only, (x) wide computer $computerBreakpoint
Large Screen Above 1400px 18% (x) wide large screen $largeMonitorBreakpoint
Widescreen Monitor Above 1920px 23% (x) wide widescreen $widescreenBreakpoint

Responsive Patterns

Semantic includes two common patterns for adjusting grids on different devices.

A doubling grid automatically adjusts column width on each device jump. Usually this relationship is an exact doubling of columns, however some adjustments have been made for display flexibility. For example, six column computer grid, will jump to a three column grid on tablet, and a two column on mobile.

A stackable grid will always force a layout to use one column on mobile. These two patterns can also be used together to, for example, force a four column grid to one on mobile.

Doubling Columns Tablet Mobile
16 Columns 8 4
15 Columns 7 4
14 Columns 7 4
13 Columns 7 3
12 Columns 6 3
11 Columns 5 3
10 Columns 5 3
9 Columns 4 3
8 Columns 4 2
7 Columns 3 2
6 Columns 3 2
5 Columns 3 2
4 Columns 2 2
3 Columns 2 2
2 Columns 8 2
1 Columns 8 1

Doubling Grid

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

Stackable Grid

Stackable grids will not adjust their column width until mobile, where all grid columns will become full width

Formatting Grids

Content Inside Grids

Previous examples were shaded to help show the physical layout of grids, but grids themselves do not provide any styles.

In order to create content segments inside a grid you must specify individual ui elements for example ui segments.

Nesting Grids

You can include grids even inside other grids, this can be useful for things like dividing rows inside of a page grid.

Matching Column Widths on Nested Grids

Each grid is divided into 16 columns, so a grid inside another grid column sub-divides that column into sixteen more columns.

This means, an eight wide column in a nested grid located inside a two wide column, is the same width as a one wide column on the outer grid.

Full Width Backgrounds

Grids use negative margins to remove first and last column margins, this means you cannot directly apply a background color on a grid. To add a background try wrapping your grid inside another container, for example a ui segment.

Due to collapsing margins the parent container must have a clearfix, or overflow:hidden to prevent inheriting the grid's margins.

Full Width Background

First section of content

Full Width Heading

Second section of content

Column Background

Third section of content

Column Background

Fourth section of content

Row and Column Backgrounds

If you need to specify colors on grid rows of columns, you can use a color variation

Using colored variations on grid columns will require you to use a padded grid variation to avoid coloring in the negative margins of the grid body.

Features

First section of content

Statistics

First section of content

Headline

Second section of content

Sitemap

Second section of content

Contact Us

Second section of content

Types

Page Grid

A page grid is used to layout page contents into a grid system.

A page grid has gutters to the left and right of its columns to center content on a page. These gutters adjust as the width of the browser changes, ensuring your grid uses a sensible amount of the browser.

Divided Grid Requires Rows

A grid can have dividers between its columns

Vertically Divided Grid Requires Rows

A grid can have dividers between rows

Celled Grid Requires Rows

A grid can have rows divided into cells

Internally Celled Grid Requires Rows

A grid can have rows divisions only between internal rows

Elements

Rows

A row is used to create vertical padding between groups of columns on a page.

Columns

Columns each contain gutters giving them equal spacing from other columns.

Variations

Grid

Column Count

A grid can have a different number of columns per row

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

Centered

A grid can have its columns centered

Equal Width Flexbox

A row can automatically resize all undeclared elements to split the available width evenly

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

Equal Height Flexbox

A row can specify that it is equal height so all of its columns appear the length of its longest column.

1
1
2
1
2
3
To make equal height column content grow to take the whole column height, use the stretched variation. Keep in mind flex items do not have margin collapse so they may display differently.
1
1
2
1
2
3
1
2
1
2

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 double 1 mobile, 3 tablet, 5 desktop

Stackable Grid

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

Text Alignment

A grid can specify its text alignment

Vertical Alignment

A grid can specify its vertical alignment to have all its columns vertically centered.

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.

Rows

Responsive Visibility

A grid can have its columns, or rows only show content for computer, tablet, or mobile.

Breakpoints are 768px and below for mobile, 768-992px for tablet and 992px+ for computer
Mobile
Mobile
Computer
Tablet and Mobile
All Sizes
All Sizes
Computer
Computer
Computer
Computer
Tablet
Tablet
Tablet

This is a short row

This is a short row

This is a very long row with lots of text in it and way more text than the other rows

It might even span for multiple paragraphs.

Columns

Floating

A column can be "floated" to either the left or right of its row.

Column Width

A column can vary in width taking up more than a single grid column.

Responsive Width

A grid row 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.

See page grid breakpoints guide for exact breakpoints.

Dimmer Message
Dimmer sub-header