2

Tenho escutado basante sobre CSS Grid Layout https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Grid_Layout

O Grid Layout é construído a partir do display:grid, e tenho escutado recorrentemente o termo "Grid Implícito" e "Grid Explicito", porém não entendi direito esse conceito...

  • O que seria um Grid Explícito? E o que seria um Grid Implícito?
  • Esse conceito de explícito e implícito também é comum em outras propriedades do CSS?
3
  • Muito boa a pergunta, diga-se de passagem.
    – Sam
    Commented 26/11/2018 às 17:12
  • @Sam como dizem que o futuro do layout web é o Grid, então resolvi perguntar rss, esse conceite de explícito e implícito é bem interessante, principalmente quando se usa com minmax junto nas colunas. É até possível conseguir layouts bem responsivos mesmo sem os @media
    – hugocsl
    Commented 26/11/2018 às 17:16
  • 1
    Com certeza. É um assunto digno a ser bastante explorado.
    – Sam
    Commented 26/11/2018 às 17:17

1 Resposta 1

4

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.

2
  • 1
    Ótima explicação, muito obrigado!
    – hugocsl
    Commented 26/11/2018 às 17:14
  • 1
    Valeu meu jovem. Tmj.
    – Sam
    Commented 26/11/2018 às 17:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .