0

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?

Enter image description here

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;
    }
  }
Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Luca Reghellin
  • 7,426
  • 12
  • 73
  • 118
  • 1
    Yes - this may help to find the duplicate, so it should be left closed but not deleted, because it is a [good signpost](https://stackoverflow.com/help/duplicates). – Adrian Mole Nov 04 '22 at 09:11

0 Answers0