Grid

Renders a div with display: grid;

Hello
world
Lorem
ipsum
<Grid
    gridRow="auto auto"
    gridTemplateColumns="50% 50%"
    gridRowGap={1}
    gridColumnGap={2}
>
    <Box p={2} bg="Secondary">Hello</Box>
    <Box p={2} bg="Tertiary">world</Box>
    <Box p={2} bg="Tertiary">Lorem</Box>
    <Box p={2} bg="Secondary">ipsum</Box>
</Grid>
<Grid
    gridRow="auto auto"
    gridTemplateColumns="50% 50%"
    gridRowGap={1}
    gridColumnGap={2}
>
    <Box p={2} bg="Secondary">Hello</Box>
    <Box p={2} bg="Tertiary">world</Box>
    <Box p={2} bg="Tertiary">Lorem</Box>
    <Box p={2} bg="Secondary">ipsum</Box>
</Grid>
Live Demo