Grid item with aspect-ratio

[hebrerillo]

Hello there!

The problem I want to solve is in this codepen:

https://codepen.io/hebrerillo/pen/rNbLXaR

As you can see, the second grid item overlaps the first item, even though the first item has a specific width and height.

Why??

Thank you so much!

 

[JosiahMaybe]

All I see is you could use word wrap and max width but what are you using this on? Can you post a screenshot? Also, where is CSS for dominant? If you set something to 100% there is no other part so it is interpreted to be on same part maybe. X E.

 

[hebrerillo]

@Jo

All I see is you could use word wrap and max width but what are you using this on? Can you post a screenshot? Also, where is CSS for dominant? If you set something to 100% there is no other part so it is interpreted to be on same part maybe. X E.

Thank you so much for your response!

Here is a screenshot of what I want to achieve:



The first grid item is an image, and the second is text. I called the second one 'dominant' because I want it to dictate the height of the grid item, and I want the image to be an square image.

So as the text gets longer, I want the image to also get bigger.

I updated the codepen with an example of a real image. This time the second item does not overlap the first one, but the image does not adapt to the height of the 'dominant' element.

How can I do that??

 

[JosiahMaybe]

Sorry, I got nothing more, anyone else?

 

[tomliv]

Sorry, I got nothing more, anyone else?

Nah. This is actually a tough nut to crack. Background-image is the only thing I can think of but scaling width might be an issue.

 

[JosiahMaybe]

I think it may help if you reveal or make that "dominant" CSS class, it is missing. X E.