Grade

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

Uma grade no CSS é definida usando o valor grid da propriedade display; você pode definir colunas e linhas na sua grade usando as propridades grid-template-rows e grid-template-columns.

A grade que você define usando essas propriedades é descrita como uma grade explícita.

Se você colocar o conteúdo fora dessa grade explícita ou se estiver utilizando o posicionamento automático e o algoritmo da grade precisar criar linhas ou colunas adicionais tracks para manter grid items, então serão criadas faixas extras na grade implícita. A grade implícita é a grade criada automaticamente devido ao conteúdo adicionado fora das faixas definidas.

No exemplo abaixo, criamos uma grade explícita de três colunas e duas linhas. A terceira linha da grade é uma faixa implícita de linha da grade, formada por serem mais do que os seis os itens que preenchem as faixas explícitas.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
<div class="wrapper">
<div> Um </div>
    <div> dois </div>
    <div> três </div>
    <div> quatro </div>
    <div> cinco </div>
    <div> seis </div>
    <div> sete </div>
    <div> oito </div>
</div>