Grid

columns

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "14" | ... 34 more ... | 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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<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>

<Grid doubling columns={24}>
  {times(24, i => (
    <Grid.Column key={i}>
      <div style={{ background: 'blue', height: 40 }} />
    </Grid.Column>
  ))}
</Grid>

Grid

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic grid

Basic grid