What defines an explicit grid?

user_10613037 0
Viewed 35

MDN defines an explicit grid with the following:

Whereas the explicit grid consists of any rows and columns defined with grid-template-columns or grid-template-rows.

So an explicit grid can have a single grid-template-columns/grid-template-rows?

e.g

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-auto-rows: 75px;
}

According to the definition this css should create an explicit grid as it contains a grid-template-columns, and thus grid-auto-rows should not apply, or only apply on the grid tracks at grid row 2 or below, but it applies to all the grid tracks.

enter image description here

However, if I apply a grid-template-columns and grid-template-rows it seems an explicit grid is created.

.wrapper {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  grid-template-rows: 20px;
  grid-auto-rows: 75px;
}

enter image description here

Am I misunderstanding the definition of an explicit grid, or am I missing something?

css-grid css html
1 Answers

thus grid-auto-rows should not apply, or only apply on the grid tracks at grid row 2 or below, but it applies to all the grid tracks.

You are misunderstanding grid-auto-rows

The grid-auto-columns and grid-auto-rows properties specify the size of tracks not assigned a size by grid-template-rows or grid-template-columns. If multiple track sizes are given, the pattern is repeated as necessary to find the size of the affected tracks. The first track after the last explicitly-sized track receives the first specified size, and so on forwards; ref

grid-auto-rows doesn't size only the implicit rows but any rows (including the explicit ones) that aren't sized. In your first example, you defined 2 explicit columns and you have 5 elements so you will end with 3 implicit rows all of them sized with grid-auto-rows

In your last example, you defined 2 columns and 1 row (with a size) so the browser will use grid-auto-rows to defined the size of the remaining 2 rows.

Here is another example:

.wrapper {
  display: grid;
  grid-template-areas:
    ". ."
    ". ."
    ". ."
    ". ."
    ". .";
  grid-auto-rows: 75px;
  border: 1px solid;
}
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

I defined a grid with 2 explicit columns and 5 explicit rows but no sizing. The browser will make all the rows equal to 75px

user_86203330
Related