Tiles by Columns

This layout is similar to the Tiles by Width example, but creates a specific number of columns. Using the array-based syntax in Rebass or Theme UI makes this easy to change across breakpoints.

Tile

<Box
  sx={{
    display: 'grid',
    gridGap: 3,
    gridTemplateColumns: [
      'repeat(2, 1fr)',
      'repeat(4, 1fr)'
    ]
  }}>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
</Box><Box
  sx={{
    display: 'grid',
    gridGap: 3,
    gridTemplateColumns: [
      'repeat(2, 1fr)',
      'repeat(4, 1fr)'
    ]
  }}>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
  <Box>Tile</Box>
</Box>

Sidebar