Grid Explícito é quando você define explicitamente no seu CSS o número de colunas e linhas de um grid.
Exemplo:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 60px 60px 60px;
grid-gap: 20px;
}
Acima foi definido 3 colunas (100px 100px 100px
) por 3 linhas (60px 60px 60px
). Ou seja, se o HTML do grid tiver apenas 9 itens (3x3), irá observar estritamente o que foi definido no CSS:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 60px 60px 60px;
grid-gap: 20px;
}
.item{
background: red;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Agora, definido o grid 3x3 acima, se você acrescentar mais itens (células) no grid, aí entra o Grid Implícito, onde o navegador automaticamente insere os itens extras no grid implícito baseando-se no que foi definido pelo grid explícito:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 60px 60px 60px;
grid-gap: 20px;
}
.item{
background: red;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
Veja que as células 10, 11 e 12 não fazem parte do grid explícito, mas do grid implícito (não faz parte do que foi definido originalmente pelo CSS). O navegador tentou adaptá-las no grid criado, mas ele não sabe a altura que essas células deveriam ter (ele só considera a largura da coluna). Para resolver isso você usa a propriedade grid-auto-rows
para que o navegador saiba que, quando houver itens extras não definidos no grid explícito, a altura desses itens sejam igual aos demais:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 60px 60px 60px;
grid-auto-rows: 60px;
grid-gap: 20px;
}
.item{
background: red;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
</div>
Esse conceito de explícito e implícito também é comum em outras
propriedades do CSS?
Sim. Em algumas propriedades, quando você não a define de forma explícita no CSS, o navegador aplica o seu padrão (implícito). Por exemplo, no caso da margem do body
, se você não explicitar a sua margem, será aplicada pelo navegador uma margem de 8px
.
minmax
junto nas colunas. É até possível conseguir layouts bem responsivos mesmo sem os@media