CSS Grid different amount of items per row

Asked Nov 07 '20 at 14:06

Active Nov 07 '20 at 14:33

Viewed 269 times

Im trying to recreate the following distribution on a CSS grid, but im not getting there.

I've tried the following:

display: inline-grid;
grid-template-columns: auto auto;

But the columns get the biggest element width in all the grid.

What im trying to do is fill the row with the most amount of elements as i can respecting the element aspect ratio and with a max height for each row.

I dont know if this is possible using a CSS grid or should i use other CSS layout?

I made a JS script that does this but im trying to make the same behaviour with CSS for better performance and less bugs.

EDIT Heights might be different for each row to adjust the ratios and prevent images croping.

Thanks

edited Nov 07 '20 at 14:33

asked Nov 07 '20 at 14:06

Fausto Sanchez

1

it's not possible with CSS grid – Temani Afif Nov 07 '20 at 14:06
check this: https://stackoverflow.com/a/60216458/8620333 – Temani Afif Nov 07 '20 at 14:07
@TemaniAfif Thanks, that is almost what i need. I will try with that and changing something to not allow images to crop. – Fausto Sanchez Nov 07 '20 at 14:15

CSS Grid different amount of items per row

0 Answers0