Pular para o conteúdo

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 um leiaute de grade com 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:

  • Ele usa Box flexível CSS para alta flexibilidade.
  • Existem dois tipos de leiautes: contêineres e itens.
  • Larguras de itens são definidas em porcentagens, então elas são sempre fluidas e dimensionadas em relação ao elemento 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.

Espaçamento

A grade responsiva se concentra em larguras de espaçamento consistentes, em vez de largura de coluna. As margens e colunas do Material Design seguem uma grade de linha de base quadrada de 8px. A propriedade de espaçamento é um inteiro entre 0 e 10. Por padrão, o espaçamento entre dois itens de grade segue uma função linear: output(spacing) = spacing * 8px, por exemplo, spacing={2} cria um espaçamento de 16px.

Esta função de transformação de saída pode ser customizada usando o tema.

Grades fluídas

As grades fluídas usam colunas que dimensionam e redimensionam o conteúdo. O leiaute de uma grade fluída pode usar pontos de quebra para determinar se o leiaute precisa mudar drasticamente.

Grade básica

A largura das colunas são valores inteiros entre 1 e 12; eles se aplicam em qualquer ponto de quebra e indicam a quantidade de colunas ocupadas pelo componente.

Um valor dado a um ponto de quebra, aplica-se a todos os outros pontos de quebra mais amplos do que ele (a menos que substituído, como você pode ler mais tarde nesta página). Por exemplo, xs={12} dimensiona o componente para ocupar toda a largura da área de exibição independente do seu tamanho.

xs=12
xs=6
xs=6
xs=3
xs=3
xs=3
xs=3

Grade com pontos de quebra

Algumas colunas têm várias larguras definidas, fazendo com que o leiaute seja alterado no ponto de interrupção definido. Os valores de largura dados para pontos de quebra maiores, substituem aqueles dados a pontos de quebra menores.

Por exemplo, xs={12} sm={6} dimensiona o componente para ocupar metade da área de exibição (6 colunas), quando a largura da área de exibição é de 600 ou mais pixels. Para áreas de exibição menores, o componente preenche todas as 12 colunas disponíveis.

xs=12
xs=12 sm=6
xs=12 sm=6
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3

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 os items compartilhem equitativamente o espaço disponível. Isso também significa que você pode definir a largura de um item e os outros automaticamente se redimensionarão em torno dele.

xs
xs
xs
xs
xs=6
xs

Grade Complexa

A demonstração a seguir não segue a especificação do Material Design, mas ilustra como a grade pode ser usada para criar leiautes complexos.

Standard license

Full resolution 1920x1080 • JPEG

ID: 1030114

Remove

$19.00

Grade Aninhada

As propriedades container e item são boleanas e independentes. Elas podem ser combinados.

Um container flex é a caixa gerada por um elemento com uma exibição definida por flex ou inline-flex. Os filhos em um fluxo de um container flex são chamados de flex items e são dispostos usando o modelo de leiaute flex (flex layout).

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.

Limitações

Margem negativa

Há uma limitação com a margem negativa que usamos para implementar o espaçamento entre itens. Uma barra de rolagem horizontal irá aparecer se uma margem negativa vai além do <body>. Existem 3 soluções disponíveis:

  1. Não usar o recurso de espaçamento e implementá-lo no espaço do usuário spacing={0} (Padrão).

  2. Aplicando padding ao pai com pelo menos metade do valor de espaçamento aplicado ao filho:

    <body>
     <div style={{ padding: 20 }}>
       <Grid container spacing={5}>
         //...
        </Grid>
     </div>
    </body>
  3. Adicionando overflow-x: hidden; para o pai.

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

<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

As propriedades xs, sm, md, lg, e xl não são suportadas com containers direction="column" e direction="column-reverse".

Elas definem o número de grades que o componente usará para um determinado ponto de quebra. Elas destinam-se a controlar a largura usando flex-basis em contêineres row, mas elas irão impactar a altura em contêineres column. Se usadas, essas propriedades podem ter efeitos indesejáveis na altura dos elementos do item Grid.

Leiaute de Grade CSS

Material-UI não fornece nenhuma funcionalidade CSS de Grade, mas como pode ser visto abaixo, você pode facilmente usar leiaute de Grade CSS em suas páginas.

Material-UI Grid:
xs=3
xs=3
xs=3
xs=3
xs=8
xs=4

CSS Grid Layout:
xs=3
xs=3
xs=3
xs=3
xs=8
xs=4