Why is grid row height too tall? - css

Question

I noticed the extra space between the title and the snippet(paragraph) as shown in the example. Is there a way to fix this, without giving up the grid? The second column, first row, is too tall...
.post-content {
display: grid;
grid-template-columns: 320px auto;
grid-template-rows: auto auto;
}
.item-thumbnail {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
margin: 0 1rem 0 0;
}
.post-title {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.post-snippet {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.item-thumbnail {
background: #444;
padding: 50% 0;
}
<div class="post-content">
<div class="post-title">
title
</div>
<div class="post-snippet">
The lone lamp post of the one-street town flickered, not quite dead but definitely on its way out.
</div>
<div class="item-thumbnail">
</div>
</div>

Answer 1

in such case, define 3 rows where the left element will take all of them. You make the last row 1fr so that the first two will get sized to their content:
.post-content {
display: grid;
grid-template-columns: 320px auto;
grid-template-rows: auto auto 1fr;
}
.item-thumbnail {
grid-row: 1/span 3;
grid-column: 1;
margin: 0 1rem 0 0;
background: #444;
padding: 50% 0;
}
.post-title,
.post-snippet {
grid-column: 2;
}
<div class="post-content">
<div class="post-title">
title
</div>
<div class="post-snippet">
The lone lamp post of the one-street town flickered, not quite dead but definitely on its way out.
</div>
<div class="item-thumbnail">
</div>
</div>
Or 2 rows and the second one 1fr. You will have the same visual in your case but the difference is that the second text is taking more space (if you add more styles like background you will notice this)
.post-content {
display: grid;
grid-template-columns: 320px auto;
grid-template-rows: auto 1fr;
}
.item-thumbnail {
grid-row: 1/span 2;
grid-column: 1;
margin: 0 1rem 0 0;
background: #444;
padding: 50% 0;
}
.post-title,
.post-snippet {
grid-column: 2;
}
<div class="post-content">
<div class="post-title">
title
</div>
<div class="post-snippet">
The lone lamp post of the one-street town flickered, not quite dead but definitely on its way out.
</div>
<div class="item-thumbnail">
</div>
</div>

Answer 2

In your .post-content class, change grid-template-rows: auto auto; to grid-template-rows: max-content;
If I understood correctly, this should be your desired result.
.post-content {
display: grid;
grid-template-columns: 320px auto;
grid-template-rows: max-content;
}
.item-thumbnail {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 3;
margin: 0 1rem 0 0;
}
.post-title {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
.post-snippet {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.item-thumbnail {
background: #444;
padding: 50% 0;
}
<div class="post-content">
<div class="post-title">
title
</div>
<div class="post-snippet">
The lone lamp post of the one-street town flickered, not quite dead but definitely on its way out.
</div>
<div class="item-thumbnail">
</div>
</div>