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

Question

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

Navigation

#1 by (4 votes)

3

I've listened to CSS Grid Layout

Grid Layout is built from display:grid , and I've been hearing the term "Implicit Grid" and "Grid Explicit" recurrently, but I did not understand it concept ...

What would an Grid Explicit be? And what would an Grid Implicit be?
Is this concept explicit and implicit also common in other CSS properties?

html5 css css3 layout-responsivo grid-layout

asked by anonymous 26.11.2018 / 13:26

1 answer

Adding data from the same column What is the interface for Countable in PHP?

score 4 · Accepted Answer

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

Example:

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

Above 3 columns have been defined ( 100px 100px 100px ) by 3 lines ( 60px 60px 60px ). That is, if the HTML of the grid has only 9 items (3x3), you will strictly observe what was 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) in the grid, there enters the Implicit Grid , where the browser automatically inserts the extra items in the implicit grid based on which 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>

See that cells 10, 11 and 12 are not part of the explicit grid, but of the implicit grid (not part of what was originally defined by CSS). The browser tried to fit them into the created grid, but it does not know how high those cells should have (it only considers the width of the column). To solve this you use the grid-auto-rows property 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 others:

.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 CSS properties?

Yes. On some properties, when you do not explicitly define it in CSS, the browser applies its default (implicit). For example, in the case of body margin, if you do not make your margin explicit, a margin of 8px will be applied by the browser.