Cell

Cells work together with the Grid component. They allow you to change layout based on viewport size.

Cells are mobile first so if you don't specify sizes for each breakpoint, it will be inferred from previous one.

In order to do not show a cell on a specific device you might pass a falsy value on the related cols prop element.

Example

Cells on one line

Then goes to new line

on mobile and tablets

Only on desktop cell

<Grid>
  <Cell
    cols={[
      [1, 7], // Mobile
      [1, 7], // Tablet
      [1, 5], // Desktop
      //xlDesktop is inferred from previous one
    ]}
  >
    <Text>Cells on one line</Text>
  </Cell>
  <Cell cols={[[1, 7], [1, 7], [5, 9]]}>
    <Text>Then goes to new line</Text>
  </Cell>
  <Cell cols={[[1, 7], [1, 7], [9, 13]]}>
    <Text>on mobile and tablets</Text>
  </Cell>
  <Cell cols={[false, null, [1, 13]]}>
      <Text>Only on desktop cell</Text>
  </Cell>
</Grid>

<Grid>
  <Cell
    cols={[
      [1, 7], // Mobile
      [1, 7], // Tablet
      [1, 5], // Desktop
      //xlDesktop is inferred from previous one
    ]}
  >
    <Text>Cells on one line</Text>
  </Cell>
  <Cell cols={[[1, 7], [1, 7], [5, 9]]}>
    <Text>Then goes to new line</Text>
  </Cell>
  <Cell cols={[[1, 7], [1, 7], [9, 13]]}>
    <Text>on mobile and tablets</Text>
  </Cell>
  <Cell cols={[false, null, [1, 13]]}>
      <Text>Only on desktop cell</Text>
  </Cell>
</Grid>

Props

Name	Type	Default value	Description
children required	node	null	The childrens to use as content of the Cell.
cols required	array	null	The cols data to use for display.