styled-components で視覚的にわかりやすい Grid Layout を生成する

import styled from 'styled-components'

export const Grid = styled.div`
  display: grid;
  grid-template-columns: ${({ columns }) => columns.join(" ")};
  grid-template-rows: ${({ rows }) => rows.join(" ")};
  grid-template-areas: ${({ areas }) =>
    areas.map(r => `'${r.join(" ")}'`).join(" ")};
  width: 100%;
  height: 100%;
`

export const GridArea = styled.div`
  grid-area: ${p => p.name};
  width: 100%;
  height: 100%;
`

// ...
import { Grid, GridArea } from './Grid'
export function MyComponent() {
  return (
    // prettier-ignore
    <Grid
      columns={["250px", "1fr"]}
      rows={[
        "40px",
        "1fr"
      ]}
      areas={[
        ["header", "header"],
        ["menu",   "editor"],
      ]}
    >
      <GridArea name="header">
        Header
      </GridArea>
      <GridArea name="menu">
        Menu
      </GridArea>
      <GridArea name="editor">
        Editor
      </GridArea>
    </Grid>
  )
}