跳转到内容

Grid 栅格

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

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

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

xs=8
xs=4
xs=4
xs=8
Press Enter to start editing

有断点的栅格

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

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

xs=6 md=8
xs=6 md=4
xs=6 md=4
xs=6 md=8
Press Enter to start editing

Spacing 间距

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

spacing
<Grid container spacing={2}>

行、列间距

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

1
2
3
4
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
xs=2
xs=2
xs=2
xs=2
xs=2
Press Enter to start editing

Responsive values is supported by:

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

交互式

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

Cell 1
Cell 2
Cell 3
direction
justifyContent
alignItems
<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
xs=6
xs
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
xs
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
Item
Item
Item
Item
Item
Item
Item
Item
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
xs=8
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>
W

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

W

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

W

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=4
xs=8
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}>