How can a last implicit row have a different height? - html

Question

Working on a CSS Grid example that contains several photo cards (items). Let's imagine that these items are created dynamically by any server-side logic.
The last item in the grid container is a div element defined as a footer for that grid, which also contains a button that has to be center-aligned inside its parent.
By the grid definition, the footer takes the height of the implicit row: 200px. The footer element spans the 2 columns of the grid.
How can the footer, being in the last implicit row, have a smaller size than the grid-auto-rows property, defined on the grid container?
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: 200px;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card>img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
background-color: lightgreen;
grid-column: 1 / 3;
}
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>

Answer 1

The grid-auto-rows property only accepts track sizes as values. It does not accept any form of syntax that would allow you to target a particular row.
Therefore, another method is needed to size the grid item appearing in the last implicit row.
Here's a simple solution: Target the last item directly.
.photos-footer {
height: 50px;
}
And then, because you want the content of that item (the button) centered, use flexbox:
.photos-footer {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
Here's the full code:
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: 200px;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card > img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
height: 50px;
align-self: end; /* align item to bottom of row */
display: flex;
justify-content: center;
align-items: center;
grid-column: 1 / 3;
background-color: lightgreen;
}
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
NOTE that this solution doesn't actually change the height of the last grid row, which remains at 200px, per the grid-auto-rows rule. This solution changes only the height of the grid item inside the last row. That's why there's a gap between the penultimate row and the grid item pinned to the bottom of the last row.
If the last row itself must have a different height, then I would suggest removing it from the grid container and placing it underneath as a new element.
NOTE also that the problem raised in the question applies only in the implicit grid. In the explicit grid, defining the height of the last row (or any row, for that matter) is simple and easy.

Answer 2

Maybe using grid-auto-rows: min-content; is fine here . grid-template-rows:50px; will only set first row's height.
height or max-height could be used on .photo-card if necessary.
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: min-content;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card>img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
background-color: lightgreen;
grid-column: 1 / 3;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
</head>
<body>
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
</body>
</html>