In CSS what are Implicit or Explicit properties or attributes? What is the difference between an "Implicit Grid" and a "Explicit Grid"?

Question

I’ve been hearing a lot about CSS Grid Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

The Grid Layout is built from the display:grid, and I have often heard the term "Implicit Grid" and "Explicit Grid", but I did not understand this concept right...

• What would be a Grid Explícito? And what would be a Grid Implicit?
• This concept of explicit and implicit is also common in other CSS properties?

Answer 1

Grid Explícito is when you define explicitly in your CSS the number of columns and rows of a grid.

Example:

.container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 60px 60px 60px;
    grid-gap: 20px;
}

Above was defined 3 columns (100px 100px 100px) by 3 lines (60px 60px 60px). That is, if the grid HTML has only 9 items (3x3), it will strictly observe what has been defined in the 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>

Now, set the 3x3 grid above, if you add more items (cells) on the grid, then enter the Grid Implicit, where the browser automatically inserts the extra items into the implicit grid based on what was defined by the explicit grid:

.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>

Note that cells 10, 11 and 12 are not part of the explicit grid, but part of the implicit grid (it is not part of what was originally defined by CSS). The browser tried to adapt them in the created grid, but he does not know how high those cells should be (he only considers the column width). To solve this you use the property grid-auto-rows so that the browser knows that when there are extra items not defined in the explicit grid, the height of these items is the same as the other:

.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>

This concept of explicit and implicit is also common in other properties of CSS?

Yes. In some properties, when you do not explicitly define it in the CSS, the browser applies its (implicit) default. For example, in the case of the body, if you do not specify your margin, a margin of 8px.