CSS Grid

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive grid utilities.

If you are new to or unfamiliar with grid, you're encouraged to read this CSS-Tricks grid guide.

Properties for the parent

display

To define a grid container, you must specify the display CSS property to have one of the values: grid or inline-grid.

I'm a grid container!

<Box sx={{ display: 'grid' }}>…</Box>
<Box sx={{ display: 'inline-grid' }}>…</Box>

grid-template-rows

The grid-template-rows property defines the line names and track sizing functions of the grid rows.

<Box sx={{ display: 'grid', gridTemplateRows: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>

<Box sx={{ display: 'grid', gridTemplateRows: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>

Press Enter to start editing

grid-template-columns

The grid-template-columns property defines the line names and track sizing functions of the grid columns.

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>

<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
</Box>

Press Enter to start editing

gap

The gap: size property specifies the gap between the different items inside the CSS grid.

<Box
  sx={{
    display: 'grid',
    gap: 1,
    gridTemplateColumns: 'repeat(2, 1fr)',
  }}
>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
</Box>

<Box
  sx={{
    display: 'grid',
    gap: 1,
    gridTemplateColumns: 'repeat(2, 1fr)',
  }}
>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
</Box>

Press Enter to start editing

row-gap & column-gap

The row-gap and column-gap CSS properties allow for specifying the row and column gaps independently.

<Box
  sx={{
    display: 'grid',
    columnGap: 3,
    rowGap: 1,
    gridTemplateColumns: 'repeat(2, 1fr)',
  }}
>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
</Box>

<Box
  sx={{
    display: 'grid',
    columnGap: 3,
    rowGap: 1,
    gridTemplateColumns: 'repeat(2, 1fr)',
  }}
>
  <Item>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
</Box>

Press Enter to start editing

grid-template-areas

The grid-template-area property defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.

Header

Main

Sidebar

Footer

<Box
  sx={{
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 1,
    gridTemplateRows: 'auto',
    gridTemplateAreas: `"header header header header"
  "main main . sidebar"
  "footer footer footer footer"`,
  }}
>
  <Box sx={{ gridArea: 'header', bgcolor: 'primary.main' }}>Header</Box>
  <Box sx={{ gridArea: 'main', bgcolor: 'secondary.main' }}>Main</Box>
  <Box sx={{ gridArea: 'sidebar', bgcolor: 'error.main' }}>Sidebar</Box>
  <Box sx={{ gridArea: 'footer', bgcolor: 'warning.dark' }}>Footer</Box>
</Box>

<Box
  sx={{
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    gap: 1,
    gridTemplateRows: 'auto',
    gridTemplateAreas: `"header header header header"
  "main main . sidebar"
  "footer footer footer footer"`,
  }}
>
  <Box sx={{ gridArea: 'header', bgcolor: 'primary.main' }}>Header</Box>
  <Box sx={{ gridArea: 'main', bgcolor: 'secondary.main' }}>Main</Box>
  <Box sx={{ gridArea: 'sidebar', bgcolor: 'error.main' }}>Sidebar</Box>
  <Box sx={{ gridArea: 'footer', bgcolor: 'warning.dark' }}>Footer</Box>
</Box>

Press Enter to start editing

grid-auto-columns

The grid-auto-column property specifies the size of an implicitly-created grid column track or pattern of tracks.

span 2

4 / 5

<Box
  sx={{
    display: 'grid',
    gridAutoColumns: '1fr',
    gap: 1,
  }}
>
  <Item sx={{ gridRow: '1', gridColumn: 'span 2' }}>span 2</Item>
  {/* The second non-visible column has width of 1/4 */}
  <Item sx={{ gridRow: '1', gridColumn: '4 / 5' }}>4 / 5</Item>
</Box>

<Box
  sx={{
    display: 'grid',
    gridAutoColumns: '1fr',
    gap: 1,
  }}
>
  <Item sx={{ gridRow: '1', gridColumn: 'span 2' }}>span 2</Item>
  {/* The second non-visible column has width of 1/4 */}
  <Item sx={{ gridRow: '1', gridColumn: '4 / 5' }}>4 / 5</Item>
</Box>

Press Enter to start editing

On the demo above, the second non-visible column has a width of 1fr/4 which is approximately equal to 25%.

grid-auto-rows

The grid-auto-rows property specifies the size of an implicitly-created grid row track or pattern of tracks.

span 2

4 / 5

<Box
  sx={{
    display: 'grid',
    gridAutoRows: '40px',
    gap: 1,
  }}
>
  <Item sx={{ gridColumn: '1', gridRow: 'span 2' }}>span 2</Item>
  {/* The second non-visible row has height of 40px */}
  <Item sx={{ gridColumn: '1', gridRow: '4 / 5' }}>4 / 5</Item>
</Box>

<Box
  sx={{
    display: 'grid',
    gridAutoRows: '40px',
    gap: 1,
  }}
>
  <Item sx={{ gridColumn: '1', gridRow: 'span 2' }}>span 2</Item>
  {/* The second non-visible row has height of 40px */}
  <Item sx={{ gridColumn: '1', gridRow: '4 / 5' }}>4 / 5</Item>
</Box>

Press Enter to start editing

grid-auto-flow

The grid-auto-flow property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

<Box
  sx={{
    display: 'grid',
    gridAutoFlow: 'row',
    gridTemplateColumns: 'repeat(5, 1fr)',
    gridTemplateRows: 'repeat(2, 50px)',
    gap: 1,
  }}
>
  <Item sx={{ gridColumn: '1', gridRow: '1 / 3' }}>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
  <Item sx={{ gridColumn: '5', gridRow: '1 / 3' }}>5</Item>
</Box>

<Box
  sx={{
    display: 'grid',
    gridAutoFlow: 'row',
    gridTemplateColumns: 'repeat(5, 1fr)',
    gridTemplateRows: 'repeat(2, 50px)',
    gap: 1,
  }}
>
  <Item sx={{ gridColumn: '1', gridRow: '1 / 3' }}>1</Item>
  <Item>2</Item>
  <Item>3</Item>
  <Item>4</Item>
  <Item sx={{ gridColumn: '5', gridRow: '1 / 3' }}>5</Item>
</Box>

Press Enter to start editing

Properties for the children

grid-column

The grid-column property is a shorthand for grid-column-start + grid-column-end. You can see how it's used in the grid-auto-columns example.

You can either set the start and end line:

<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ gridColumn: '1 / 3' }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…

Or set the number of columns to span:

<Box sx={{ borderColor: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'error.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'error.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box sx={{ gridColumn: 'span 2' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…

grid-row

The grid-row property is a shorthand for grid-row-start + grid-row-end. You can see how it's used in the grid-auto-rows example.

You can either set the start and end line:

<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 0 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ boxShadow: 1 }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box boxShadow={0}>…
<Box boxShadow={1}>…
<Box sx={{ boxShadow: 2 }}>…
<Box boxShadow={3}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…
<Box boxShadow={0}>…
<Box sx={{ gridRow: '1 / 3' }}>…
<Box boxShadow={2}>…
<Box boxShadow={3}>…

Or set the number of rows to span:

<Box sx={{ borderColor: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'error.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'error.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box sx={{ gridRow: 'span 2' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…

grid-area

The grid-area property allows you to give an item a name so that it can be referenced by a template created with the grid-template-areas property. You can see how it's used in the grid-template-area example.

<Box sx={{ borderColor: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'error.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'primary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'secondary.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'error.main' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box sx={{ borderColor: 'grey.500' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…
<Box borderColor="primary.main">…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box sx={{ gridArea: 'header' }}>…
<Box borderColor="secondary.main">…
<Box borderColor="error.main">…
<Box borderColor="grey.500">…
<Box borderColor="text.primary">…

API

import { flexbox } from '@material-ui/system';

Nome da importação	Propriedade	Propriedade CSS	Chave do tema
`gap`	`gap`	`gap`	none
`columnGap`	`columnGap`	`column-gap`	none
`rowGap`	`rowGap`	`row-gap`	none
`gridColumn`	`gridColumn`	`grid-column`	none
`gridRow`	`gridRow`	`grid-row`	none
`gridAutoFlow`	`gridAutoFlow`	`grid-auto-flow`	none
`gridAutoColumns`	`gridAutoColumns`	`grid-auto-columns`	none
`gridAutoRows`	`gridAutoRows`	`grid-auto-rows`	none
`gridTemplateColumns`	`gridTemplateColumns`	`grid-template-columns`	none
`gridTemplateRows`	`gridTemplateRows`	`grid-template-rows`	none
`gridTemplateAreas`	`gridTemplateAreas`	`grid-template-areas`	none
`gridArea`	`gridArea`	`grid-area`	none