Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagHeaderIconImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentItemFeedStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText AreaTransitionable Portal

Grid
A grid is used to harmonize negative space in a layout.

src/collections/Grid/Grid.js
Semantic UI Grid Docs
GridGrid.ColumnGrid.Row

Types

Grid

A basic grid.

Divided

A grid can have dividers between its columns.

You can also use semantic names for columns.

Vertically Divided

A grid can have dividers between rows.

Celled

A grid can have rows divided into cells.

Internally Celled

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 row can automatically resize all elements to split the available width evenly.

Stretched

A row can automatically resize all elements to split the available height evenly.

Padded

A grid can preserve its vertical and horizontal gutters on first and last columns.

Relaxed

A grid can increase its gutters to allow for more negative space.

Colored

A grid row or column can be colored.

Inverted

A grid can be inverted to allow dividers to be seen with a dark background.

Centered

A grid can have its columns centered.

Text Alignment

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

Vertical Alignment

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

Responsive Variations

Containers

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

Doubling

A grid can double its column width on tablet and mobile sizes.

Stackable

A grid can have its columns stack on-top of each other after reaching mobile breakpoints.

Reversed

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

A grid or row can specify that its columns should reverse order on multiple device sizes.

Device Visibility

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

See SUI Container's documentation for information on breakpoint calculations.

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.

Responsive width props are not compatible with the width prop.

This is the bottom