Why do these grid items fill all vertical space?

Question

Here's what my page looks like:

Why does the thumbnails column fill its vertical space? When there are fewer than five rows, the images divide themselves between the top and bottom of the space. I want them to fill the space from top to bottom, leaving any extra space on the bottom.

This gives me my 20px vertical gap instead of dividing the space evenly...

grid-template-rows: auto 1fr;

...but the space is filled by blank rows (see rendered gallery in above link).

What I'm looking for is 20px between rows and no more, and to align content to the top.

.gallery {
  width: 1230px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
     'gallery-slide-div gallery-thumbs-div'
     'gallery-img-title gallery-img-title';
  font: normal 18px 'AlegreyaSans-Regular', Arial, Helvetica, sans-serif;
  grid-column-gap: 44px;
}

.gallery-slide-img {
  border: #999999 .5px solid;
}

.gallery-thumb-img {
  width: 100px;
  border: #999999 .5px solid;
}

.gallery-slide-div {
  width: 841px;
  height: 589px;
  grid-area: gallery-slide-div;
}

.gallery-thumbs-div {
  width: 343px;
  grid-area: gallery-thumbs-div;
  /* this is where it goes in gallery div */
  /* this is what it contains */
  display: grid;
  grid-template-columns: repeat(auto-fill, 101px);
  grid-auto-rows: auto;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  row-gap: 20px;
  grid-template-rows: auto 1fr;
}

.gallery-img-title {
  text-align: center;
}

user_3597276 · Answer

Look at these lines in the code:

.gallery-thumbs-div {
    grid-template-rows: auto 1fr;
    grid-auto-rows: auto;
}

This translates to:

The first row will be the height of the content (auto)
The second row will consume all available space (1fr).

grid-template-rows is now done, as it defined only two rows.

grid-auto-rows now takes over.

The third and fourth rows, which are undefined, will be the height of the content (grid-auto-rows: auto)

So the second row, because it's consuming all free space, is pinning the last two rows to the bottom of the container.

I would just remove both lines entirely (grid-template-rows is defining only two rows, and grid-auto-rows: auto is already set by default).

Finally, add align-content: start, which will override the align-content: stretch default.

.gallery {
  width: 1230px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-areas:
      'gallery-slide-div gallery-thumbs-div'
      'gallery-img-title gallery-img-title';
  font: normal 18px 'AlegreyaSans-Regular', Arial, Helvetica, sans-serif;
  grid-column-gap: 44px;
}

.gallery-slide-img {
  border: #999999 .5px solid;
}

.gallery-thumb-img {
  width: 100px;
  border: #999999 .5px solid;
}

.gallery-slide-div {
  width: 841px;
  height: 589px;
  grid-area: gallery-slide-div;
}

.gallery-thumbs-div {
  width: 343px;
  grid-area: gallery-thumbs-div;
  /* this is where it goes in gallery div */
  /* this is what it contains */
  display: grid;
  grid-template-columns: repeat(auto-fill, 101px);
  /* grid-auto-rows: auto; */
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  row-gap: 20px;
  /* grid-template-rows: auto 1fr; */
  align-content: start; /* new */
}

.gallery-img-title {
  text-align: center;
}

Why do these grid items fill all vertical space?

1 Answers