Grid 栅格

Material Design 响应式布局的栅格可适应屏幕大小和方向，确保布局在不同尺寸之间的一致性。

Grid 栅格组件能确保不同布局间的视觉层面的舒适感，同时在众多不同设计中保持灵活性。 Material Design 基于 12 列的网格布局来做到 UI 的响应式。

警告，不应将Grid与data grid相互混淆，那是一个和布局网格相同的网格 For a data grid head to the DataGrid component.

工作原理

网格系统是对Grid的实现

它使用 CSS 弹性盒子模块来做到高度灵活。
它有两种类型的布局： containers ， _items_。
每项的宽度是按百分比设置的，所以它们的大小总是相对于它们的父元素流动。
子项目（items）使用内边距来保持和其他块（items）的间距。
其中五个断点可供使用：xs，sm，md，lg 和 xl。
给每个断点赋予的整型值都代表了当视图宽度可以满足断点约束时组件里占用了12个可用列里的几个

如果你不熟悉flexbox，我们建议你参考 CSS-Tricks flexbox篇

Fluid grids 流式网格

流式网格可以通过列（column）来缩放和调整内容的大小。流式网格可以用断点来决定布局是否需要大幅度变化

基本栅格

列宽是一个基于1-12的整型值，他们可以用于任意断点来代表组件占用了多少列

给定断点适用于其它比它更大的断点（除非重写，你会将在本页的后面看到）举个例子，xs={12}会在无论他自己大小有多大的情况下将组件的宽度调整为占据整个视图宽度

xs=8

xs=4

xs=8

<Grid container spacing={2}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={4}>
    <Item>xs=4</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

Press Enter to start editing

有断点的栅格

组件可能有多个宽度定义，这会导致组件根据指定的断点大小来布局大的断点的宽度值会覆盖小的断点的宽度值

举个例子，xs={12} sm={6}会在视图宽度为的时候让组件占据视图一半的宽度（6列）对于较小的视图宽度，则会占据所有的12列

xs=6 md=8

xs=6 md=4

xs=6 md=8

<Grid container spacing={2}>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={4}>
    <Item>xs=6 md=4</Item>
  </Grid>
  <Grid item xs={6} md={8}>
    <Item>xs=6 md=8</Item>
  </Grid>
</Grid>

Press Enter to start editing

Spacing 间距

控制子控件之间的间距，可以使用spacing属性 Spacing可以是包含小数和整型值还有字符串的任意大于0的数属性值会使用theme.spacing()助手来转换成css属性

行、列间距

rowSpacing和columnSpacing属性允许你独立指定列间距和行间距他和CSS Grid里的row-gap还有 column-gap属性相同

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid item xs={6}>
    <Item>1</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>2</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>3</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>4</Item>
  </Grid>
</Grid>

<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
  <Grid item xs={6}>
    <Item>1</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>2</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>3</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>4</Item>
  </Grid>
</Grid>

Press Enter to start editing

响应式的值

You can switch the props' value based on the active breakpoint. For instance, we can implement the "recommended" responsive layout grid of Material Design.

xs=2

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid item xs={2} sm={4} md={4} key={index}>
      <Item>xs=2</Item>
    </Grid>
  ))}
</Grid>

<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
  {Array.from(Array(6)).map((_, index) => (
    <Grid item xs={2} sm={4} md={4} key={index}>
      <Item>xs=2</Item>
    </Grid>
  ))}
</Grid>

Press Enter to start editing

Responsive values is supported by:

columns
columnSpacing
direction
rowSpacing
spacing
系统中的所有其它属性

⚠️ When using a responsive columns prop, each grid item needs its corresponding breakpoint. For instance, this is not working. The grid item misses the value for md:

<Grid container columns={{ xs: 4, md: 12 }}>
  <Grid item xs={2} />
</Grid>

交互式

Below is an interactive demo that lets you explore the visual results of the different settings:

Cell 1

Cell 2

Cell 3

<Grid
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
>

自适应布局

The Auto-layout makes the items equitably share the available space. That also means you can set the width of one item and the others will automatically resize around it.

xs=6

<Grid container spacing={3}>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

Press Enter to start editing

负边距

Set one of the size breakpoint props to "auto" instead of true / a number to size a column based on the natural width of its content.

variable width content

xs=6

<Grid container spacing={3}>
  <Grid item xs="auto">
    <Item>variable width content</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

<Grid container spacing={3}>
  <Grid item xs="auto">
    <Item>variable width content</Item>
  </Grid>
  <Grid item xs={6}>
    <Item>xs=6</Item>
  </Grid>
  <Grid item xs>
    <Item>xs</Item>
  </Grid>
</Grid>

Press Enter to start editing

复杂的栅格

The following demo doesn't follow the Material Design guidelines, but illustrates how the grid can be used to build complex layouts.

Standard license

Full resolution 1920x1080 • JPEG

ID: 1030114

Remove

$19.00

嵌套栅格

The container and item props are two independent booleans; they can be combined to allow a Grid component to be both a flex container and child.

https://www.w3.org/TR/css-flexbox-1/#box-model

Item

<Grid container spacing={1}>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
</Grid>

<Grid container spacing={1}>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
  <Grid container item spacing={3}>
    <FormRow />
  </Grid>
</Grid>

Press Enter to start editing

⚠️ Defining an explicit width to a Grid element that is flex container, flex item, and has spacing at the same time lead to unexpected behavior, avoid doing it:

<Grid spacing={1} container item xs={12}>

If you need to do such, remove one of the props.

列

You can change the default number of columns (12) with the columns prop.

xs=8

<Grid container spacing={2} columns={16}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

<Grid container spacing={2} columns={16}>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
  <Grid item xs={8}>
    <Item>xs=8</Item>
  </Grid>
</Grid>

Press Enter to start editing

设计局限

负边距

The spacing between items is implemented with a negative margin. This might lead to unexpected behaviors. For instance, to apply a background color, you need to apply display: flex; to the parent.

white-space: nowrap;

The initial setting on flex items is min-width: auto. It's causing a positioning conflict when the children is using white-space: nowrap;. You can experience the issue with:

<Grid item xs>
  <Typography noWrap>

In order for the item to stay within the container you need to set min-width: 0. In practice, you can set the zeroMinWidth prop:

<Grid item xs zeroMinWidth>
  <Typography noWrap>

Truncation should be conditionally applicable on this long line of text as this is a much longer line than what the container can support.

direction: column | column-reverse

The xs, sm, md, lg, and xl props are not supported within direction="column" and direction="column-reverse" containers.

They define the number of grids the component will use for a given breakpoint. They are intended to control width using flex-basis in row containers but they will impact height in column containers. If used, these props may have undesirable effects on the height of the Grid item elements.

CSS 栅格布局

The Grid component is using CSS flexbox internally. But as seen below, you can easily use the system and CSS Grid to layout your pages.

xs=8

xs=4

xs=8

<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
  <Box gridColumn="span 8">
    <Item>xs=8</Item>
  </Box>
  <Box gridColumn="span 4">
    <Item>xs=4</Item>
  </Box>
  <Box gridColumn="span 4">
    <Item>xs=4</Item>
  </Box>
  <Box gridColumn="span 8">
    <Item>xs=8</Item>
  </Box>
</Box>

<Box display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={2}>
  <Box gridColumn="span 8">
    <Item>xs=8</Item>
  </Box>
  <Box gridColumn="span 4">
    <Item>xs=4</Item>
  </Box>
  <Box gridColumn="span 4">
    <Item>xs=4</Item>
  </Box>
  <Box gridColumn="span 8">
    <Item>xs=8</Item>
  </Box>
</Box>

Press Enter to start editing

系统属性

As a CSS utility component, the Grid supports all system properties. You can use them as props directly on the component. For instance, a padding:

<Grid item p={2}>

API

<Grid />