CSS Grid - MUI System

Skip to contentMUI Systemv7.3.6

• Getting started
• Style utilities
  • Properties
  • Borders
  • Display
  • Flexbox
  • Grid
  • Palette
  • Positions
  • Shadows
  • Sizing
  • Spacing
  • Screen readers
  • Typography
  • styled
• Components
• Migration
• APIs
• Experimental APIs
• StylesLegacy

+ 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> CopyCopied(or $keyC)

grid-template-rows

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

123<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.

123<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.

1234<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.

1234<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.

HeaderMainSidebarFooter<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 24 / 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 24 / 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.

12345<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 sx={{ gridColumn: '1 / 3' }}>… CopyCopied(or $keyC)

Or set the number of columns to span:

<Box sx={{ gridColumn: 'span 2' }}>… CopyCopied(or $keyC)

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 sx={{ gridRow: '1 / 3' }}>… CopyCopied(or $keyC)

Or set the number of rows to span:

<Box sx={{ gridRow: 'span 2' }}>… CopyCopied(or $keyC)

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={{ gridArea: 'header' }}>… CopyCopied(or $keyC)

API

import { grid } from '@mui/system'; CopyCopied(or $keyC)

Import name	Prop	CSS property	Theme key
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

Contents

• Properties for the parent
  • display
  • grid-template-rows
  • grid-template-columns
  • gap
  • row-gap & column-gap
  • grid-template-areas
  • grid-auto-columns
  • grid-auto-rows
  • grid-auto-flow
• Properties for the children
  • grid-column
  • grid-row
  • grid-area
• API

Become a Diamond sponsorMUI stands in solidarity with Ukraine.Search…