GridView

View Source

Lay out children in columns and rows. Wraps CSS grid styles in a simple API. Any direct children can use the column|Start|End or row|Start|End shorthand properties to place themselves on the grid. To learn more about how you can use CSS grid visit learncssgrid.com.

Copy

Edit

const Cell = (props) => (
  <StackView
    alignment="center"
    distribution="center"
    padding={1}
    radius={3}
    backgroundColor="blue-5"
    color="white"
    {...props}
  />
)
render(
  <GridView columns={[12, 32]} minHeight={20} spacing={2}>
    <Cell column={1}>A</Cell>
    <Cell column={2}>B</Cell>
  </GridView>
)

const Cell = (props) => (
  <StackView
    alignment="center"
    distribution="center"
    padding={1}
    radius={3}
    backgroundColor="blue-5"
    color="white"
    {...props}
  />
)
render(
  <GridView columns={[12, 32]} minHeight={20} spacing={2}>
    <Cell column={1}>A</Cell>
    <Cell column={2}>B</Cell>
  </GridView>
)

Header

Content

Sidebar

Footer

Copy

Edit

const Cell = (props) => (
  <StackView
    alignment="center"
    distribution="center"
    padding={1}
    radius={3}
    backgroundColor="blue-5"
    color="white"
    {...props}
  />
)
render(
  <GridView columns="100px 300px" rows="40px 200px 80px" spacing={2}>
    <Cell columnStart={1} columnEnd={-1} row={1}>
      Header
    </Cell>
    <Cell column={2} row={2}>
      Content
    </Cell>
    <Cell column={1} row={2}>
      Sidebar
    </Cell>
    <Cell columnStart={1} columnEnd={-1} row={3}>
      Footer
    </Cell>
  </GridView>
)

const Cell = (props) => (
  <StackView
    alignment="center"
    distribution="center"
    padding={1}
    radius={3}
    backgroundColor="blue-5"
    color="white"
    {...props}
  />
)
render(
  <GridView columns="100px 300px" rows="40px 200px 80px" spacing={2}>
    <Cell columnStart={1} columnEnd={-1} row={1}>
      Header
    </Cell>
    <Cell column={2} row={2}>
      Content
    </Cell>
    <Cell column={1} row={2}>
      Sidebar
    </Cell>
    <Cell columnStart={1} columnEnd={-1} row={3}>
      Footer
    </Cell>
  </GridView>
)