Please see this two columns grid example, where the image is set to be 100% width/height with object-fit set to cover. The issue here is that I would like the thumb column to be as short as the text/contents column. In other words, the row to be as short as the text column, not the thumb one. Is it possible in some way?
Here's the really basic code:
.main-link{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.post-thumb{
grid-column: 1 / 2;
}
.post-contents{
grid-column: 2 / 3;
}
And for the image:
figure.post-thumb{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}