Grid - Semantic UI

UI Docs Getting Started New in 2.4 Introduction Integrations Build Tools Recipes Glossary Usage Theming Layouts Globals Reset Site Elements Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Collections Breadcrumb Form Grid Menu Message Table Views Advertisement Card Comment Feed Item Statistic Modules Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition Behaviors API Form Validation Visibility Menu Grid UI Docs Getting Started New in 2.4 Introduction Integrations Build Tools Recipes Glossary Usage Theming Layouts Globals Reset Site Elements Button Container Divider Flag Header Icon Image Input Label List Loader Placeholder Rail Reveal Segment Step Collections Breadcrumb Form Grid Menu Message Table Views Advertisement Card Comment Feed Item Statistic Modules Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition Behaviors API Form Validation Visibility Grid A grid is used to harmonize negative space in a layout Select Language English English dansk Danish Español Spanish 简体中文 Chinese 中文 (臺灣) Chinese (Taiwan) پارسی Persian Français French ελληνικά Greek Русский Russian Deutsch German Italiano Italian Nederlands Dutch Português(BR) Portuguese Indonesian Indonesian Lietuvių Lithuanian Türkçe Turkish 한국어 Korean العربية Arabic Magyar Hungarian tiếng Việt Vietnamese svenska Swedish polski Polish 日本語 Japanese românește Romanian Download

UI Framework

Themable Build Tools Choose

Standalone

Default Theme Precompiled Choose Semantic UI Download ZIP Getting Started

Package Managers

NPM Git Standalone Grid Download ZIP View GitHub

Package Managers

Bower NPM Git Overview Definition Want to Support Open Source? Whitelist Your Ad-Blocker. We promise to not show more than one small ad per page. Dont worry, hiding this message will make sure you won't get nagged again.

Introduction

Grids

A grid is a structure with a long history used to align negative space in designs.

Using a grid makes content appear to flow more naturally on your page.

Toggle Animation

Columns

Grids divide horizontal space into indivisible units called "columns". All columns in a grid must specify their width as proportion of the total available row width.

All grid systems choose an arbitrary column count to allow per row. Semantic's default theme uses 16 columns.

The example below shows four four wide columns will fit in the first row, 16 / 4 = 4, and three various sized columns in the second row. 2 + 8 + 6 = 16

The default column count, and other arbitrary features of grids can be changed by adjusting Semantic UI's underlying theming variables.

Rows

Rows are groups of columns which are aligned horizontally.

Rows can either be explicit, marked with an additional row element, or implicit, automatically occurring when no more space is left in a previous row.

After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm.

Gutters

Grid columns are separated by areas of white space referred to as "gutters". Gutters improve legibility by providing, negative space between page elements.

Gutters remain a constant size regardless of the width of the grid, or how many columns are in a row. To increase the size of gutters in a particular grid, you can use a relaxed grid variation.

Negative Margins

Since all grid columns include gutters, grids use negative margins to make sure that the first and last columns sit flush with content outside the grid.

In the following example, you can see even though the top row has padding, the attached button still sits flush with the edge of the grid.

In some cases, like when a column or row is colored, you may want to avoid using negative margins. You can do this by using a padded grid variation.

Button before grid Button after grid

Page Grids

Grids are fluid and will automatically flow in size to take the maximum available width.

Containers are elements designed to limit page content to a reasonable maximum width for display based on the size of the user's screen.

Using a ui grid container is the best way to include top-level page content inside a grid.

In version 1.x of Semantic UI page grid were used to contain the maximum width of grids holding page content. Page grid have been deprecated in favor for the simpler container element.

Columns

Automatic Flow

Most grids do not need to specify rows. Content will automatically flow to the next row when all the grid columns are taken in the current row.

Column Content

Since columns use padding to create gutters, content stylings should not be applied directly to columns, but to elements inside of columns.

Column Widths

Column widths can be specified using (x) wide class names. If a column cannot fit in a row it will automatically flow to the next row

Rows

Grouping

Row wrappers allow you to apply variations to a group of columns.

Clearing Content

Row wrappers will automatically clear previous columns, making them useful when using floated variations.

Special Grids

Additionally, some types of grids, like divided or celled require row wrappers to apply formatting correctly.

Varying Grids

Nesting Grids

Grids can be placed inside of other grids, letting you sub-divide columns.

Colored

Grids can use named colors variations to add background colors, but only with padded grid that do not include negative margins.

To include a color that is not available in the default palette its perfectly fine to use CSS

Olive Black Custom Row Black Olive

Automatic Column Count

The equal width variation will automatically divide column width evenly. This is useful with dynamic content where you do not know the column count in advance.

Centering Content

If a row does not take up all sixteen grid columns, you can use a centered variation to center the column contents inside the grid.

Significant Word Order

Grids include many variations for adjusting things like vertical or horizontal alignment, text alignment, or default gutter sizes.

Some multi-word variations, like left floated or right aligned are word-order dependent and require you to use adjacent class names.

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

Responsive Grids

Containers

A container can be used alongside a grid to provide a responsive, fixed width container for wrapping the contents of a page.

Stackable

A stackable grid will automatically stack rows to a single columns on mobile devices

Reverse Order

Semantic includes special reversed variations that allow you to reverse the order of columns or rows by device

First Second Third

Doubling

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

Manual Tweaks

Although design patterns like doubling or stackable are useful at simplifying responsive styling, you can also manually tweak device presentation by specifying (x) wide device or device only columns or rows.

Types

Grid Flexbox

A basic grid

Divided Requires Rows

A grid can have dividers between its columns

Vertically Divided Requires Rows

A grid can have dividers between rows

Celled Requires Rows

A grid can have rows divided into cells

Internally Celled Requires Rows

A grid can have rows divisions only between internal rows

Content

Rows

A row is a horizontal grouping of columns

Columns

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

Variations

Floated

A column can sit flush against the left or right edge of a row

Column Width

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

Column Count

A grid can have a different number of columns per row

Equal Width

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

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

Stretched

A row can stretch its contents to take up the entire column height

1 1 2 1 2 3 1 2 1 2 1 2 1 2

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

Colored

A row or column can be colored

Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black Red Orange Yellow Olive Green Teal Blue Violet Purple Pink Brown Grey Black

Centered

A grid can have its columns centered

Text Alignment

A grid, row, or column can specify its text alignment

Cats Dogs Poodle Cockerspaniel Monkeys Cats Dogs Poodle Cockerspaniel Monkeys

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.

Cats Dogs Poodle Cockerspaniel Monkeys

Vertical Alignment

A grid, row, or column can specify its vertical alignment to have all its columns vertically centered.

Responsive Variations

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 use 2 mobile, 3 tablet, 5 desktop. To force 1 column on mobile you can add stackable

Stackable

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

Reversed

A grid or row can specify that its columns should reverse order at different device sizes

Reversed grids are compatible with divided grids and other complex grid types. Computer A Fourth Computer A Third Computer A Second Computer A First Computer B Fourth Computer B Third Computer B Second Computer B First Tablet Fourth Tablet Third Tablet Second Tablet First Mobile Fourth Mobile Third Mobile Second Mobile First Computer Row 4 Computer Row 3 Computer Row 2 Computer Row 1 Tablet Row 4 Tablet Row 3 Tablet Row 2 Tablet Row 1 Mobile Row 4 Mobile Row 3 Mobile Row 2 Mobile Row 1

Device Visibility

A columns or row can appear only for a specific device, or screen sizes

See container documentation for information on breakpoint calculations Large Screen Large Screen Widescreen Widescreen Mobile Mobile Computer Tablet and Mobile All Sizes All Sizes Computer Computer Computer Computer Tablet Tablet Tablet

Responsive Width

A column 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.

Community

Help Translate Submit an Issue Join our Chat CLA

Network

GitHub Repo User Forums 1.x Docs 0.x Docs

Help Preserve This Project

Support for the continued development of Semantic UI comes directly from the community.

Donate Today Free & Open Source (MIT) The Translation Needs Your Help

This translation is only % complete!

We need your help to make Semantic available to people who speak your language.

Our translation tools are easy to use and allow you to translate text without having to leave the site.

No Thanks Help Translate Would you like to visit the mirror site?

Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.

No Thanks Yes, take me to the mirror

Dimmer Message Dimmer sub-header