Getting StartedColorsTypographyChangelog
Components
ActionsPanelAlertAutocompleteButtonCheckboxDropdownErrorPresenterFormGridBasic gridColumn widthColumn CountCustom width for device screenDevice VisibilityReversedDoublingGroupedListHeaderIconInputKeyValueLabelLabelActionLayoutLinkListNavigationPanelPageHeaderProgressRadioSelectSidePanelTabsTextAreaToggleTree
Grid
columns
Widths | undefined
https://react.semantic-ui.com/collections/grid/
Basic grid
<Grid padded><Grid.Row>{times(24, i => (<Grid.Column key={i}><div style={{ background: 'blue', height: 40 }} /></Grid.Column>))}</Grid.Row></Grid>
Column width
<Grid padded><Grid.Row><Grid.Column width={20}><div style={{ background: 'blue', height: 40 }} /></Grid.Column><Grid.Column width={4}><div style={{ background: 'blue', height: 40 }} /></Grid.Column></Grid.Row></Grid><Grid padded><Grid.Row><Grid.Column width="twenty"><div style={{ background: 'blue', height: 40 }} /></Grid.Column><Grid.Column width="four"><div style={{ background: 'blue', height: 40 }} /></Grid.Column></Grid.Row></Grid>
Column Count
Grid
<Grid padded columns={17}><Grid.Row>{times(17, i => (<Grid.Column key={i}><div style={{ background: 'blue', height: 40 }} /></Grid.Column>))}</Grid.Row></Grid>
Row
<Grid padded><Grid.Row columns={24}>{times(24, i => (<Grid.Column key={i}><div style={{ background: 'blue', height: 40 }} /></Grid.Column>))}</Grid.Row><Grid.Row columns={2}><Grid.Column><div style={{ background: 'blue', height: 40 }} /></Grid.Column><Grid.Column><div style={{ background: 'blue', height: 40 }} /></Grid.Column></Grid.Row></Grid>
Custom width for device screen
<Grid padded><Grid.Row><Grid.Column bigPhone={17} tablet={10}><div style={{ background: 'blue', height: 40 }} /></Grid.Column><Grid.Column bigPhone={7} tablet={5}><div style={{ background: 'blue', height: 40 }} /></Grid.Column></Grid.Row></Grid><Grid padded><Grid.Row><Grid.Column bigPhone="seventeen" tablet={10}><div style={{ background: 'blue', height: 40 }} /></Grid.Column><Grid.Column bigPhone="seven" tablet={5}><div style={{ background: 'blue', height: 40 }} /></Grid.Column></Grid.Row></Grid><Grid padded><Grid.Row><Grid.Column tablet={17}><div style={{ background: 'blue', height: 40 }} /></Grid.Column><Grid.Column tablet="seventeen"><div style={{ background: 'blue', height: 40 }} /></Grid.Column></Grid.Row></Grid>
Device Visibility
Column only
<Grid padded><Grid.Row><Grid.Column only="big phone large screen" width={17}><div style={{ background: 'blue', height: 40 }} /></Grid.Column></Grid.Row></Grid>
Row only
<Grid padded><Grid.Row only="mobile big phone tablet" columns={3}>{times(3, i => (<Grid.Column key={i}><div style={{ background: 'blue', height: 40 }} /></Grid.Column>))}</Grid.Row><Grid.Row only="computer" columns={16}>{times(16, i => (<Grid.Column key={i}><div style={{ background: 'blue', height: 40 }} /></Grid.Column>))}</Grid.Row><Grid.Row only="big phone computer"><Grid.Column width={17}><div style={{ background: 'blue', height: 40 }} /></Grid.Column></Grid.Row></Grid>
Reversed
Grid reversed
<Grid reversed="big phone computer" columns="equal" padded><Grid.Row><Grid.Column>Computer and Big Phone Fourth</Grid.Column><Grid.Column>Computer and Big Phone Third</Grid.Column><Grid.Column>Computer and Big Phone Second</Grid.Column><Grid.Column>Computer and Big Phone First</Grid.Column></Grid.Row><Grid.Row><Grid.Column>Computer and Big Phone Fourth</Grid.Column><Grid.Column>Computer and Big Phone Third</Grid.Column><Grid.Column>Computer and Big Phone Second</Grid.Column><Grid.Column>Computer and Big Phone First</Grid.Column></Grid.Row></Grid>
Row reversed
<Grid columns="equal"><Grid.Row reversed="computer big phone"><Grid.Column>Computer and Big Phone Fourth</Grid.Column><Grid.Column>Computer and Big Phone Third</Grid.Column><Grid.Column>Computer and Big Phone Second</Grid.Column></Grid.Row></Grid>
Doubling
<Grid doubling columns={24}>{times(24, i => (<Grid.Column key={i}><div style={{ background: 'blue', height: 40 }} /></Grid.Column>))}</Grid>