How to force an aspect ratio to grid cells?

[emile]

Hello,

My client wants their Vlogs grid cells to have a 16:9 aspect ratio (to match their video thumbnails)
Is there a way to force the grid cells to keep a 16:9 ratio?

I tried setting the “post” background-image to “featured image” then playing around with the width/height of the post, also tried going the “post > article > figure” route, but still unable to set a defined aspect ratio to the grid cell.

Thanks

[ruenel]

Hey @Emile,

Thanks for writing in! The grid cells do not have any aspect ratio settings, unlike the video element. Usually, having a 3 column cell should display items in an almost 16:9 ratio. How did you set the video in the cell? We would love to check the blog items and how it is structured. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Best Regards.

[emile]

Hi @ruenel,

Thanks for your response! I understand that grid cells do not have native aspect ratio settings like the video element. I am sending you the URL in a secure note.

Basically I would like the grid cell to be as close to 16:9 as possible so it doesn’t cut the video thumbnail too much (set as background image)

Thanks!

Emile

[friech]

Hi Emile,

You can use the same principle provided here, but instead of applying the 56.25% as bottom padding, you might need to apply it as a min-height of the column, minus the 2vw top and bottom margin. So that would look like min-height: calc(56.25% - 2vw);

Hope it helps,
Cheers!