Grid

Live Editor

function GridDemo() {
  return (
    <ThemeProvider>
      <Grid columns={{ initial: '1fr', md: 'repeat(3, 1fr)' }} gap="1rem">
        <div>A</div>
        <div>B</div>
        <div>C</div>
      </Grid>
    </ThemeProvider>
  );
}

Result

Loading...

Key Props

columns, rows, gap, rowGap, columnGap, autoFlow, autoRows, autoColumns, align, justify, place, alignContent, justifyContent, placeContent, display, headless