Перейти к контенту
Редактировать эту страницу

Grid

Сетка адаптивного макета Material Design адаптируется к размеру экрана и ориентации, обеспечивая согласованность макетов.

Сетка создает визуальную согласованность между макетами, позволяя гибко адаптироваться к разнообразным дизайнам. Адаптивный пользовательский интерфейс Material Design основан на сетке с 12 колонками.

⚠️ Компонент Сетка не путать с сеткой данных; он ближе к раскладке сетки. Для передачи данных заголовок перейти к: компоненту DataGrid.

Как это работает

Система сетки реализована с помощью компонента Grid:

  • Она использует модуль Flexible Box CSS для повышенной гибкости.
  • Существует два типа макетов: containers и items.
  • Ширина item задается в процентах, поэтому они всегда гибко изменяют свой размер относительно родительского элемента.
  • Элементы имеют отступы для создания промежутков между отдельными элементами.
  • Существует пять контрольных точек прерывания сетки: xs, sm, md, lg и xl.
  • Каждой точке останова (breakpoint) могут быть присвоены целые значения, указывая сколько из 12 доступных столбцов занято компонентом, когда ширина видимости соответствует breakpoint constants (константе breakpoint).

Если вы слабо знакомы (или совсем незнакомы) с Flexbox, мы рекомендуем Вам прочитать это руководство CSS-Tricks Flexbox.

Адаптивные сетки

Адаптивные сетки используют столбцы, которые меняют свою ширину и масштабируют размер содержимого. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically.

Базовая сетка

Column widths are integer values between 1 and 12; they apply at any breakpoint and indicate how many columns are occupied by the component.

A value given to a breakpoint applies to all the other breakpoints wider than it (unless overridden, as you can read later in this page). For example, xs={12} sizes a component to occupy the whole viewport width regardless of its size.

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

Сетка с несколькими breakpoints

Components may have multiple widths defined, causing the layout to change at the defined breakpoint. Width values given to larger breakpoints override those given to smaller breakpoints.

For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) when viewport width is 600 or more pixels. For smaller viewports, the component fills all 12 available columns.

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

Интервал

To control space between children, use the spacing prop. The spacing value can be any positive number, including decimals and any string. The prop is converted into a CSS property using the theme.spacing() helper.

spacing
<Grid container spacing={2}>

Responsive values

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

Responsive values is supported by:

  • columns
  • columnSpacing
  • direction
  • rowSpacing
  • spacing
  • all the other props of the system

⚠️ 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>

Row & column spacing

The rowSpacing and columnSpacing props allow for specifying the row and column gaps independently. It's similar to the row-gap and column-gap properties of CSS Grid.

1
2
3
4
<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>

Интерактивность

Ниже приведен интерактивный пример, который демонстрирует результаты различных настроек сетки:

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

Сложная сетка

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.

A flex container is the box generated by an element with a computed display of flex or inline-flex. In-flow children of a flex container are called flex items and are laid out using the flex layout model.

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

Item
Item
Item
Item
Item
Item
Item
Item
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>

⚠️ 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
<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>

Ограничения

Отрицательный margin

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;

Первоначальные настройки для flex-элементов (flex items) равны min-width: auto. Это вызывает конфликт позиционирования, когда потомки используют white-space: nowrap;. Вы можете получить проблему с кодом такого типа:

<Grid item xs>
  <Typography noWrap>

Чтобы элемент оставался в контейнере, необходимо установить 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
<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>

System props

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