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

userH3yr 0
Viewed 68

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?

css-grid css html
1 Answers

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.

Alohci0
Related