Why are the terms Implicit and Explicit used in CSS Grid for declared CSS properties?-CodePudding

I find the terms "Implicit" and "Explicit" confusing when it comes to CSS Grid.

Consider the following CSS:

#myDiv {
    display: grid;
    grid-template-columns: 50px;
    grid-auto-rows: 50px 75px;
}

When this is applied to the following HTML:

<div id="myDiv">
     <div>1</div>
     <div>2</div>
     <div>3</div>
     <div>4</div>
     <div>5</div>
     <div>6</div>
     <div>7</div>
     <div>8</div>
</div>

In this example grid-template-columns: 50px; is said to be an "Explicit" definition. This makes sense because it's defined explicitly in the CSS.

However, grid-auto-rows: 50px 75px is said to be an "Implicit" definition. But why is this because that property is also defined in the CSS?

How can you tell the difference between an Implicit and Explicit property for properties that are defined in a CSS file?

CodePudding user response：

Remember that nothing is created by CSS alone. CSS generates boxes when it matches elements in the DOM document.

The difference between "explicit" and "implicit" is the former is defined directly and the latter indirectly.

When an element matches a rule with display:grid, a grid container box is created and the explicit grid is created. If there is a grid container at all, then the lines and tracks of the explicit grid exist, regardless of what that DOM element contains. That grid has been directly defined to exist, simply by the presence of a grid container element.

In contrast, the implicit grid is the result of grid tracks being needed to be created to house grid items that don't, for whatever reason, fit in the explicit grid. Their presence is indirectly defined, and only exist if there are DOM elements that match rules which create those non-fitting grid items.

CodePudding user response：

It's not about CSS. Those terms refers to the grid configuration. "explicit" is used when you explicitly define your grid (rows and columns). "implicit" refers to the rows/columns automatically generated by the browsers.

I have a detailed article about these concept if you want more detail: https://css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers/

And here is a quotes from the Specification:

The grid-template-rows, grid-template-columns, and grid-template-areas properties define a fixed number of tracks that form the explicit grid. When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid.