Grid

Note: the examples on this page have been specifically styled to make normally invisible grid elements visible. These non-standard styles:

Content areas of grid columns have been given backgrounds to demonstrate their bounds.
The left and right edges of the columns have been marked with a dashed line to demonstrate the extent of the grid gutters.
Nested grid rows have been given a white outline to demonstrate their bounds.

<div className="ColumnExamples">
  <Row>
    <Col small={2} large={4}>x</Col>
    <Col small={4} large={4}>x</Col>
    <Col small={6} large={4}>x</Col>
  </Row>
  <Row>
    <Col large={3}>x</Col>
    <Col large={6}>x</Col>
    <Col large={3}>x</Col>
  </Row>
  <Row>
    <Col small={6} large={2}>x</Col>
    <Col small={6} large={8}>x</Col>
    <Col small={12} large={2}>x</Col>
  </Row>
  <Row>
    <Col small={3}>x</Col>
    <Col small={9}>x</Col>
  </Row>
  <Row>
    <Col large={4}>x</Col>
    <Col large={8}>x</Col>
  </Row>
  <Row>
    <Col small={6} large={5}>x</Col>
    <Col small={6} large={7}>x</Col>
  </Row>
  <Row>
    <Col large={6}>x</Col>
    <Col large={6}>x</Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row>
    <Col small={2} large={4}>x</Col>
    <Col small={4} large={4}>x</Col>
    <Col small={6} large={4}>x</Col>
  </Row>
  <Row>
    <Col large={3}>x</Col>
    <Col large={6}>x</Col>
    <Col large={3}>x</Col>
  </Row>
  <Row>
    <Col small={6} large={2}>x</Col>
    <Col small={6} large={8}>x</Col>
    <Col small={12} large={2}>x</Col>
  </Row>
  <Row>
    <Col small={3}>x</Col>
    <Col small={9}>x</Col>
  </Row>
  <Row>
    <Col large={4}>x</Col>
    <Col large={8}>x</Col>
  </Row>
  <Row>
    <Col small={6} large={5}>x</Col>
    <Col small={6} large={7}>x</Col>
  </Row>
  <Row>
    <Col large={6}>x</Col>
    <Col large={6}>x</Col>
  </Row>
</div>

<Row className="ColumnExamples" flex>
  <Col shrink>shrunk</Col>
  <Col>remainder</Col>
</Row>

<Row className="ColumnExamples" flex>
  <Col shrink>shrunk</Col>
  <Col>remainder</Col>
</Row>

<Row flex className="ColumnExamples">
  <Col mediumOrder={2} largeOrder={1}>
    This column will come second on medium, and first on large.
  </Col>
  <Col mediumOrder={1} largeOrder={2}>
    This column will come first on medium, and second on large.
  </Col>
</Row>

<Row flex className="ColumnExamples">
  <Col mediumOrder={2} largeOrder={1}>
    This column will come second on medium, and first on large.
  </Col>
  <Col mediumOrder={1} largeOrder={2}>
    This column will come first on medium, and second on large.
  </Col>
</Row>

<div>
  <Row flex className="ColumnExamples">
    <Col alignStart small={6}>Align-self start</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex className="ColumnExamples">
    <Col alignEnd small={6}>Align-self end</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex className="ColumnExamples">
    <Col alignCenter small={6}>Align-self center</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex className="ColumnExamples">
    <Col alignStretch small={6}>Align-self stretch</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex className="ColumnExamples">
    <Col alignBaseline small={6}>Align-self baseline</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
</div>

<div>
  <Row flex className="ColumnExamples">
    <Col alignStart small={6}>Align-self start</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex className="ColumnExamples">
    <Col alignEnd small={6}>Align-self end</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex className="ColumnExamples">
    <Col alignCenter small={6}>Align-self center</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex className="ColumnExamples">
    <Col alignStretch small={6}>Align-self stretch</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex className="ColumnExamples">
    <Col alignBaseline small={6}>Align-self baseline</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row alignStart flex>
    <Col small={6}>Columns aligned flex-start</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row alignEnd flex>
    <Col small={6}>Columns aligned flex-end</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row alignCenter flex>
    <Col small={6}>Columns aligned center</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row alignStretch flex>
    <Col small={6}>Columns aligned stretch</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row alignBaseline flex>
    <Col small={6}><h4>Columns aligned baseline</h4></Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex>
    <Col small={6}>Unspecified columns fill vertical space</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row alignStart flex>
    <Col small={6}>Columns aligned flex-start</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row alignEnd flex>
    <Col small={6}>Columns aligned flex-end</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row alignCenter flex>
    <Col small={6}>Columns aligned center</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row alignStretch flex>
    <Col small={6}>Columns aligned stretch</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row alignBaseline flex>
    <Col small={6}><h4>Columns aligned baseline</h4></Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
  <Row flex>
    <Col small={6}>Unspecified columns fill vertical space</Col>
    <Col small={6}>
      <Lipsum />
    </Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row flex justifyStart>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the left</Col>
  </Row>
  <Row flex justifyEnd>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the right</Col>
  </Row>
  <Row flex justifyCenter>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the middle</Col>
  </Row>
  <Row flex justifySpaceBetween>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the edges</Col>
  </Row>
  <Row flex justifySpaceAround>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the space around</Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row flex justifyStart>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the left</Col>
  </Row>
  <Row flex justifyEnd>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the right</Col>
  </Row>
  <Row flex justifyCenter>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the middle</Col>
  </Row>
  <Row flex justifySpaceBetween>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the edges</Col>
  </Row>
  <Row flex justifySpaceAround>
    <Col small={4}>Aligned to</Col>
    <Col small={4}>the space around</Col>
  </Row>
</div>

<Row className="ColumnExamples">
  <Col small={8}>8
    <Row>
      <Col small={8}>8
        <Row>
          <Col small={8}>8</Col>
          <Col small={4}>4</Col>
        </Row>
      </Col>
      <Col small={4}>4</Col>
    </Row>
  </Col>
  <Col small={4}>4</Col>
</Row>

<Row className="ColumnExamples">
  <Col small={8}>8
    <Row>
      <Col small={8}>8
        <Row>
          <Col small={8}>8</Col>
          <Col small={4}>4</Col>
        </Row>
      </Col>
      <Col small={4}>4</Col>
    </Row>
  </Col>
  <Col small={4}>4</Col>
</Row>

<div className="ColumnExamples">
  <Row>
    <Col large={2}>2</Col>
    <Col large={10}>10</Col>
  </Row>
  <Row>
    <Col large={2}>2</Col>
    <Col large={9} largeOffset={1}>9, offset 1</Col>
  </Row>
  <Row>
    <Col large={2}>2</Col>
    <Col large={8} largeOffset={2}>8, offset 2</Col>
  </Row>
  <Row>
    <Col large={2}>2</Col>
    <Col large={7} largeOffset={3}>7, offset 3</Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row>
    <Col large={2}>2</Col>
    <Col large={10}>10</Col>
  </Row>
  <Row>
    <Col large={2}>2</Col>
    <Col large={9} largeOffset={1}>9, offset 1</Col>
  </Row>
  <Row>
    <Col large={2}>2</Col>
    <Col large={8} largeOffset={2}>8, offset 2</Col>
  </Row>
  <Row>
    <Col large={2}>2</Col>
    <Col large={7} largeOffset={3}>7, offset 3</Col>
  </Row>
</div>

<Row mediumUncollapse largeCollapse className="ColumnExamples">
  <Col small={6}>
    Removes gutter at large media query
  </Col>
  <Col small={6}>
    Removes gutter at large media query
  </Col>
</Row>

<Row mediumUncollapse largeCollapse className="ColumnExamples">
  <Col small={6}>
    Removes gutter at large media query
  </Col>
  <Col small={6}>
    Removes gutter at large media query
  </Col>
</Row>

<Row smallUp={1} mediumUp={3} largeUp={5} className="ColumnExamples ColumnExamples--blockGrid">
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
</Row>

<Row smallUp={1} mediumUp={3} largeUp={5} className="ColumnExamples ColumnExamples--blockGrid">
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
  <Col>
    <img src="//placekitten.com/g/300/300" className="ResponsiveImage" alt="" />
  </Col>
</Row>

<div className="ColumnExamples">
  <Row>
    <Col small={10} smallPush={2}>1st</Col>
    <Col small={2} smallPull={10}>2nd</Col>
  </Row>
  <Row>
    <Col large={9} largePush={3}>1st</Col>
    <Col large={3} largePull={9}>2nd</Col>
  </Row>
  <Row>
    <Col large={8} largePush={4}>1st</Col>
    <Col large={4} largePull={8}>2nd</Col>
  </Row>
  <Row>
    <Col small={5} smallPush={7}>1st</Col>
    <Col small={7} smallPull={5}>2nd</Col>
  </Row>
  <Row>
    <Col medium={6} mediumPush={6}>1st</Col>
    <Col medium={6} mediumPull={6}>2nd</Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row>
    <Col small={10} smallPush={2}>1st</Col>
    <Col small={2} smallPull={10}>2nd</Col>
  </Row>
  <Row>
    <Col large={9} largePush={3}>1st</Col>
    <Col large={3} largePull={9}>2nd</Col>
  </Row>
  <Row>
    <Col large={8} largePush={4}>1st</Col>
    <Col large={4} largePull={8}>2nd</Col>
  </Row>
  <Row>
    <Col small={5} smallPush={7}>1st</Col>
    <Col small={7} smallPull={5}>2nd</Col>
  </Row>
  <Row>
    <Col medium={6} mediumPush={6}>1st</Col>
    <Col medium={6} mediumPull={6}>2nd</Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row>
    <Col medium={3}>3</Col>
    <Col medium={3}>3</Col>
    <Col medium={3}>3</Col>
  </Row>
  <Row>
    <Col medium={3}>3</Col>
    <Col medium={3}>3</Col>
    <Col medium={3} end>3 end</Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row>
    <Col medium={3}>3</Col>
    <Col medium={3}>3</Col>
    <Col medium={3}>3</Col>
  </Row>
  <Row>
    <Col medium={3}>3</Col>
    <Col medium={3}>3</Col>
    <Col medium={3} end>3 end</Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row>
    <Col small={3} smallCentered>3 centered</Col>
  </Row>
  <Row>
    <Col small={6} smallCentered>6 centered</Col>
  </Row>
  <Row>
    <Col small={9} smallCentered largeUncentered>
      9 centered, largeUncentered
    </Col>
  </Row>
  <Row>
    <Col small={11} smallCentered>11 centered</Col>
  </Row>
</div>

<div className="ColumnExamples">
  <Row>
    <Col small={3} smallCentered>3 centered</Col>
  </Row>
  <Row>
    <Col small={6} smallCentered>6 centered</Col>
  </Row>
  <Row>
    <Col small={9} smallCentered largeUncentered>
      9 centered, largeUncentered
    </Col>
  </Row>
  <Row>
    <Col small={11} smallCentered>11 centered</Col>
  </Row>
</div>