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](https://material.io/design/layout/responsive-layout-grid.html) cria consistência visual entre leiautes enquanto permite flexibilidade através de uma grande variedade de projetos. A UI responsiva do Material Design é baseada em um leiaute de grade com 12 colunas. ## Como funciona O sistema de grade é implementado com o componente `Grid`: - Ele usa [CSS’s Flexible Box](https://www.w3.org/TR/css-flexbox-1/) 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. Se você é **novo ou não está familiarizado com o flexbox**, nós recomendamos você a ler este [guia do Flexbox CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). ## 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 (espaçamento) = espaçamento * 8px`, por exemplo, `espaçamento ={2}` criando um intervalo de 16px. Esta função de transformação de saída pode ser customizada [usando o tema](/customization/spacing/). {{"demo": "pages/components/grid/SpacingGrid.js"}} ## Grades Fluídas Grades fluídas usam colunas que escalam e redimensionam o conteúdo. O leiaute de uma grade fluída pode usar pontos de quebra (breakpoints) para determinar se o leiaute precisa mudar drasticamente. ### Grade básica As larguras de coluna se aplicam-se a todos os pontos de quebra (breakpoints) (i.e. `xs` e acima). {{"demo": "pages/components/grid/CenteredGrid.js"}} ### Grade com pontos de interrupção (breakpoints) Algumas colunas têm várias larguras definidas, fazendo com que o leiaute seja alterado no ponto de interrupção definido. {{"demo": "pages/components/grid/FullWidthGrid.js"}} ## Interativo Abaixo está uma demonstração interativa que permite explorar os resultados visuais das diferentes configurações: {{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true}} ## Leiaute Automático O leiaute automático faz com que os *itens* compartilhem de forma equivalente o espaço disponível. Isso também significa que você pode definir a largura de um *item* e os outros serão redimensionados automaticamente em torno dele. {{"demo": "pages/components/grid/AutoGrid.js"}} ## 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. {{"demo": "pages/components/grid/ComplexGrid.js"}} ## Grade Aninhada As propriedades booleanas `container` e `item` são independentes. Elas podem ser combinadas. > 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 {{"demo": "pages/components/grid/NestedGrid.js"}} ## 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 ``. Existem 3 soluções alternativas 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: ```jsx