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. Material Design's responsive UI is based on a 12-column grid layout.

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:

It uses CSS's Flexible Box module for high flexibility.
Existem dois tipos de leiautes: contêineres e itens.
Item widths are set in percentages, so they're always fluid and sized relative to their parent element.
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. A fluid grid's layout can use breakpoints to determine if the layout needs to change dramatically.

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.

⚠️ Missing demo `pages/components/grid/CenteredGrid.js` ⚠️

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

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

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

⚠️ Definindo uma largura explícita para um elemento de grade que é um contêiner flexível, item flexível e tem espaçamento ao mesmo tempo, tem um comportamento inesperado, evite fazendo isto:

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

Se você precisar fazer isso, remova uma das propriedades.

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:

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

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>

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>

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.

xs=8

xs=4

xs=8

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

API

<Grid />