Grade
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>
-
CSS Grid Layout Guide: Basic concepts of grid layout
-
Property reference