Traditional Grid#

We have all seen this before, but it is super easy to build with styled-css-grid.

<Grid columns={12}>
  <Cell width={1}>1/12</Cell>
  <Cell width={1}>2/12</Cell>
  ...
  <Cell width={2}>1/6</Cell>
  <Cell width={2}>2/6</Cell>
  ...
</Grid>

Transposed Grid#

However, transposing this is difficult without display: grid, even with flexbox. With styled-css-grid this is made simple! Just use height instead of width and add flow="column" to the Grid component. This maps directly to the grid-auto-flow CSS property.

<Grid flow="column" columns={5}>
  <Cell height={1}>1/12</Cell>
  <Cell height={1}>2/12</Cell>
  ...
  <Cell height={2}>1/6</Cell>
  <Cell height={2}>2/6</Cell>
  ...
</Grid>

Positioning#

You can use the left and top props to set the grid-column-start and grid-row-start CSS properties, respectively. This allows you to offset content or have finer grain control over the position of cells.

Keep in mind that the top-left coordinate is (1, 1), not (0, 0).

<Grid columns={3}>
  <Cell>Top Left</Cell>
  <Cell left={3}>Top Right</Cell>
  <Cell left={2} top={2}>Middle</Cell>
  <Cell top={3}>Bottom Left</Cell>
  <Cell top={3} left={3}>Bottom Right</Cell>
</Grid>

Dense Layout#

By default, styled-css-grid set the flow property to row. However, by setting it to row dense you can turn on CSS grid's dense cell packing. Notice how the order of the cells in the markup is not same when it is rendered!

<Grid flow="row dense" columns={4}>
  <Cell width={2} height={1}>
    A 200x100
  </Cell>
  <Cell width={1} height={2}>
    B 100x200
  </Cell>
  <Cell width={2} height={1}>
    C 200x100
  </Cell>
  <Cell>
    D 100x100
  </Cell>
  <Cell>
    E 100x100
  </Cell>
</Grid>

View Source

A

B

C

D

E

Responsive Layout#

The grid-template-columns CSS property is incredibly powerful for building responsive content. When the columns prop is a number, it is a shorthand for grid-template-columns: repeat(N, 1fr). However, when you pass a string, the value is passed directly to the CSS property, allowing you leverage the full power of this property.

If you're just after basic responsive content that will automatically fit to your content, you can use repeat(auto-fit, minmax(120px, 1fr)) as your columns prop, which will create columns to auto-fit your content with a minimum width of 120px.

Resize your browser for an example.

<Grid columns="repeat(auto-fit,minmax(120px,1fr))">
  <Cell>A</Cell>
  <Cell>B</Cell>
  ...
</Grid>

Holy Grail Layout#

The Holy Grail layout is trivial using the rows prop. This prop is forwarded to the grid-template-rows CSS property. In this example we set the first and last rows to be at least 45px tall, but auto-grow if the content grows. The middle row is set to 1fr, which will grow to take up all available space.

<Grid
  columns={"100px 1fr 100px"}
  rows={"minmax(45px,auto) 1fr minmax(45px,auto)"}>
  <Cell width={3}>
    <h1>Header</h1>
  </Cell>

  <Cell>Menu</Cell>
  <Cell>Content</Cell>
  <Cell>Ads</Cell>

  <Cell width={3}>
    Footer
  </Cell>
</Grid>

Areas#

This example takes the holy grail layout and applies "areas" to it. Using areas means you no longer need to use width and height on your cells. Instead you specify areas (which maps to grid-template-areas) on your Grid, and use the names you supplied on the Cells using the area prop, which again maps directly to the grid-areas CSS property.

Notice that this gives you the flexibility to arrange the HTML in a different order to how it is displayed on screen.

<Grid
  columns={"100px 1fr 100px"}
  rows={"45px 1fr 45px"}
  areas={[
    "header header  header",
    "menu   content ads   ",
    "footer footer  footer"
  ]}>
  <Cell area="header">Header</Cell>
  <Cell area="content">Content</Cell>
  <Cell area="menu">Menu</Cell>
  <Cell area="ads">Ads</Cell>
  <Cell area="footer">Footer</Cell>
</Grid>

Alignment#

Horizontal alignment of columns can be modified using the justifyContent (justify-content CSS property).

<Grid
  columns={"50px 50px 50px"}
  justifyContent="space-around">
  <Cell>A</Cell>
  <Cell>B</Cell>
  <Cell>C</Cell>
</Grid>

Vertical alignment of rows can be modified using the alignContent (align-content CSS property).

<Grid
  columns={1}
  alignContent="space-around">
  <Cell>A</Cell>
  <Cell>B</Cell>
  <Cell>C</Cell>
</Grid>

Centering Content#

Centering content (especially verticically) has traditionally been quite difficult in CSS. styled-css-grid offers two helper props, middle and center to simpify the process.

<Grid columns={2}>
  <Cell>Default</Cell>
  <Cell middle>Middle</Cell>
  <Cell center>Center</Cell>
  <Cell center middle>Center-Middle</Cell>
</Grid>