132 lines
4.5 KiB
Markdown
132 lines
4.5 KiB
Markdown
|
# CSS Grid
|
||
|
|
|
||
|
|
<p class="description">Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive grid utilities.</p>
|
||
|
|
|
||
|
|
If you are **new to or unfamiliar with grid**, you're encouraged to read this [CSS-Tricks grid](https://css-tricks.com/snippets/css/complete-guide-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`.
|
||
|
|
|
||
|
|
{{"demo": "Display.js", "defaultCodeOpen": false}}
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<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.
|
||
|
|
|
||
|
|
{{"demo": "GridTemplateRows.js", "bg": true}}
|
||
|
|
|
||
|
|
### grid-template-columns
|
||
|
|
|
||
|
|
The `grid-template-columns` property defines the line names and track sizing functions of the grid columns.
|
||
|
|
|
||
|
|
{{"demo": "GridTemplateColumns.js", "bg": true}}
|
||
|
|
|
||
|
|
### gap
|
||
|
|
|
||
|
|
The `gap: size` property specifies the gap between the different items inside the CSS grid.
|
||
|
|
|
||
|
|
{{"demo": "Gap.js", "bg": true}}
|
||
|
|
|
||
|
|
### row-gap & column-gap
|
||
|
|
|
||
|
|
The `row-gap` and `column-gap` CSS properties allow for specifying the row and column gaps independently.
|
||
|
|
|
||
|
|
{{"demo": "RowAndColumnGap.js", "bg": true}}
|
||
|
|
|
||
|
|
### 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.
|
||
|
|
|
||
|
|
{{"demo": "GridTemplateAreas.js", "bg": true}}
|
||
|
|
|
||
|
|
### grid-auto-columns
|
||
|
|
|
||
|
|
The `grid-auto-column` property specifies the size of an implicitly-created grid column track or pattern of tracks.
|
||
|
|
|
||
|
|
{{"demo": "GridAutoColumns.js", "bg": true}}
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
{{"demo": "GridAutoRows.js", "bg": true}}
|
||
|
|
|
||
|
|
### 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.
|
||
|
|
|
||
|
|
{{"demo": "GridAutoFlow.js", "bg": true}}
|
||
|
|
|
||
|
|
## 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](/system/grid/#grid-auto-columns).
|
||
|
|
|
||
|
|
You can either set the start and end line:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ gridColumn: '1 / 3' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
Or set the number of columns to span:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ gridColumn: 'span 2' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
### 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](/system/grid/#grid-auto-rows).
|
||
|
|
|
||
|
|
You can either set the start and end line:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ gridRow: '1 / 3' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
Or set the number of rows to span:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ gridRow: 'span 2' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
### 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](/system/grid/#grid-template-areas).
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
<Box sx={{ gridArea: 'header' }}>…
|
||
|
|
```
|
||
|
|
|
||
|
|
## API
|
||
|
|
|
||
|
|
```js
|
||
|
|
import { grid } from '@mui/system';
|
||
|
|
```
|
||
|
|
|
||
|
|
| 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 |
|