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 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`](/components/data-grid/). ## Como funciona O sistema de grade é implementado com o componente `Grid`: - Ele usa [Box flexível CSS](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 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](/customization/spacing/). {{"demo": "pages/components/grid/SpacingGrid.js", "bg": true}} ## 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 As larguras de coluna se aplicam a todos os pontos de quebra (por exemplo, `xs` e acima). {{"demo": "pages/components/grid/CenteredGrid.js", "bg": true}} ### Grade com pontos de quebra Algumas colunas têm várias larguras definidas, fazendo com que o leiaute seja alterado no ponto de quebra definido. {{"demo": "pages/components/grid/FullWidthGrid.js", "bg": true}} ## Interativo Abaixo está uma demonstração interativa que permite explorar os resultados visuais das diferentes configurações: {{"demo": "pages/components/grid/InteractiveGrid.js", "hideToolbar": true, "bg": true}} ## Leiaute Automático O leiaute automático faz com que os *itens* 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. {{"demo": "pages/components/grid/AutoGrid.js", "bg": true}} ## 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", "bg": true}} ## 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 itens** e são dispostos usando o modelo de layout flex. https://www.w3.org/TR/css-flexbox-1/#box-model {{"demo": "pages/components/grid/NestedGrid.js", "bg": true}} ## 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 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