Grade

O leiaute responsivo da grade do Material Design se adapta ao tamanho e orientação da tela, garantindo a consistência entre leiautes.

Uma grade cria consistência visual entre leiautes, enquanto permite flexibilidade em uma ampla variedade de projetos. A UI responsiva do Material Design é baseada em uma grade de 12 colunas.

O componente Grid não deve ser confundido com um data grid; ele está mais próximo de um layout grid. Para um cabeçalho do data grid para o componente DataGrid.

Como funciona

O sistema de grade é implementado com o componente Grid:

Ela usa o módulo CSS de box flexível para alta flexibilidade.
Existem dois tipos de leiautes: contêineres e itens.
Larguras de itens são definidas em porcentagens, desse modo são sempre fluidas e dimensionadas de acordo os seus elementos pai.
Itens têm preenchimento para criar o espaçamento entre itens individuais.
Existem cinco pontos de quebra (breakpoints) na grade: xs, sm, md, lg e xl.
Valores inteiros podem ser dados para cada ponto de quebra, indicando quantas das 12 colunas disponíveis são ocupadas pelo componente quando a largura da área de exibição satisfaz as restrições de ponto de quebra.

Se você é novo ou não está familiarizado com o flexbox, nós recomendamos você a ler este guia do Flexbox CSS-Tricks.

Grades fluídas

As grades fluídas usam colunas que dimensionam e redimensionam o conteúdo. Uma disposição fluida de malha pode usar pontos de ruptura para determinar se precisa mudar drasticamente.

Grade básica

As larguras das colunas é representada por um numero inteiro que varia de 1 a 12. Podemos aplica-las a qualquer ponto de ruptura para indicar quantas colunas são ocupadas pelo componente.

Um valor aplicado a um ponto de ruptura se aplica a todos os outros pontos maiores, a menos que seja alterado, como será visto posteriormente nesta página. Por exemplo nesse trecho xs={12} definimos que o componente ocupará toda a largura da tela, independente do tamanho da tela.

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>

Grade com pontos de quebra

Podemos definir várias larguras para os componentes, resultando em um leiaute que muda de acordo com o ponto de ruptura. Width values given to larger breakpoints override those given to smaller breakpoints.

Aqui por exemplo xs={12} sm={6} define que o componente ocupará metade da largura da tela (6 colunas) em um dispositivo com resolução de 600px pra cima. Já para dispositivos menores, o componente vai tomar todas as 12 colunas.

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>

Espaçamento

Para controlar o espaço entre os filhos, use a prop spacing O valor do espaçamento pode ser qualquer numero positivo, incluindo decimais e até strings (cadeia de caracteres) As props são convertidas em css usando o auxiliar theme.spacing()

Valores responsivos

Podemos ativar as props de acordo com ponto de ruptura ativo Por exemplo, podemos implementar o leiaute responsivo do Material Design "recommended"

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>

Valores responsivos são suportados por:

colunas
espaçoDeColuna
direção
espaçoDeLinha
spacing
todas as outras propriedades do sistema other props

⚠️ Quando Usamos a prop de código responsivo colunas , cada item da manha precisa de seu correspondente ponto de ruptura. Por exemplo, este não está funcionando Os itens da malha precisa de seu valor para md (ponto médio)
<Grid container columns={{ xs: 4, md: 12 }}>
   <Grid item xs={2} />
> </Grid>

Row & column spacing

As props rowSpacing e columnSpacing nos permite especificar os espaços entre linhas e entre colunas de forma independente. É similar as propriedades row-gap e column-gap da Malha CSS.

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

Interativo

Abaixo está uma demonstração interativa que permite explorar os resultados visuais das diferentes configurações:

Cell 1

Cell 2

Cell 3

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

Leiaute Automático

O leiaute automático faz com que o espaço disponível seja compartilhado de forma proporcional items Isso também quer dizer que podemos definir que a largura de um item se ajustará automaticamente ao redor dele

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>

Grade Complexa

A demo a seguir não segue as normas do Material Design mas ilustra bem como a malha pode ser usada para criar layouts complexos

Standard license

Full resolution 1920x1080 • JPEG

ID: 1030114

Remove

$19.00

Grade Aninhada

As props container e item são buleanas independentes; Podemo ser combinados para permitir que um componente Grid seja tanto um contêiner flex como um filho (item do contêiner)

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

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

Colunas

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>

Limitações

Margem negativa

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;

A configuração inicial em itens flexíveis é min-width: auto. Isto causa um conflito de posicionamento quando os elementos filhos estão usando white-space: nowrap. Você pode enfrentar o problema com:

<Grid item xs>
  <Typography noWrap>

Para que o item permaneça dentro do contêiner, você precisa definir 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.

Leiaute de Grade 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>

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

<Grid />