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;
}
<div class="gallery">
<div class="gallery-slide-div">
<img src="/images/gallery/canvas/large/1.jpg" class="gallery-slide-img">
</div>
<div class="gallery-thumbs-div">
<img src="/images/gallery/canvas/small/1.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/2.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/3.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/4.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/5.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/6.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/7.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/8.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/9.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/10.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/11.jpg" class="gallery-thumb-img">
<img src="/images/gallery/canvas/small/12.jpg" class="gallery-thumb-img">
</div>
<div class="gallery-img-title" id="gallery-1-img-title">
title
</div>
</div>
Look at these lines in the code:
.gallery-thumbs-div {
grid-template-rows: auto 1fr;
grid-auto-rows: auto;
}
This translates to:
auto
)1fr
).grid-template-rows
is now done, as it defined only two rows.
grid-auto-rows
now takes over.
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;
}
<div class="gallery">
<div class="gallery-slide-div">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
</div>
<div class="gallery-thumbs-div">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
<img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
</div>
<div class="gallery-img-title" id="gallery-1-img-title">
title
</div>
</div>