CODEWITHSUNDEEP
csscss-grid
Alicia
Alicia

Reputation: 23

Grid-auto-row necessary when using grid-template-areas?

Is grid-auto-rows unecessary when you use grid-template-areas to define your layout? I was quite convinced this was still the case, but deleting that part of the code I wrote seems to not affect the overall site-layout at all. I am asking about this in general, the code is merely an example.

.wrapper {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: minmax(50px, auto);
    grid-template-areas:
    "nav nav nav nav nav nav nav nav"
    "area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area1 area1 area1 area1 area1 area1 area1 area1 "
"area2 area2 area2 area2 area2 area2 area2 area2 "
"area2 area2 area2 area2 area2 area2 area2 area2 "
  "footer footer footer footer footer footer footer footer";
}

Upvotes: 2

Views: 448

Answers (1)

Temani Afif
Temani Afif

Reputation: 273838

You are not defining any grid-template-rows so yes it's needed if you want to set the height of your rows. Without it, each row will have its height defined as auto but probably in your case minmax(50px,auto) is also using the auto part since 50px is smaller than your content. In case of empty rows, you will have 50px.

Here is an example to see the difference:

.wrapper {
    display: grid;
    grid-auto-rows: minmax(50px, auto);
    grid-template-areas:
    "nav "
    "area1 "
"area1"
"area1"
"area1 "
"area2  "
"area2 "
  "footer ";
  margin:10px;
}
.nav {grid-area:nav}
.area1 {grid-area:area1}
.area2 {grid-area:area2}
.footer {grid-area:footer}

.wrapper > div {
  border:1px solid red;
}
<div class="wrapper">
<div class="nav"></div>
<div class="area1"></div>
<div class="area2"></div>
<div class="footer"></div>
</div>

<div class="wrapper" style="grid-auto-rows: minmax(10px, auto);">
<div class="nav"></div>
<div class="area1"></div>
<div class="area2"></div>
<div class="footer"></div>
</div>

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid

The size of the explicit grid is determined by the larger of the number of rows/columns defined by grid-template-areas and the number of rows/columns sized by grid-template-rows/grid-template-columns. Any rows/columns defined by grid-template-areas but not sized by grid-template-rows/grid-template-columns take their size from the grid-auto-rows / grid-auto-columns properties. ref

Upvotes: 2

Related Questions