Uma grade no CSS é definida usando o valor grid da propriedade {{cssxref("display")}}; você pode definir colunas e linhas na sua grade usando as propridades {{cssxref("grid-template-rows")}} e {{cssxref("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 {{glossary("grid tracks", "tracks")}} para manter {{glossary("grid item", "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.
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.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>
{{ EmbedLiveSample('example', '500', '330') }}