Creating a fixed row height/auto column count grid layout with css grid

Question

I am trying to create the following layout with css grid:

What I have tried so far looks as follows:

.grid {
    padding: 16px;
    display: grid;
    grid-template-rows: repeat(auto-fill, 200px);
}

img {
    height: 100%;
    width: auto;
}

but I am having trouble making the column count dynamic. Is it not possible at all?

Answer 1

CSS grid isn't a good fit for the layout you want. Luckily you can use flexbox to achieve something similar:

.grid {
    display: flex;
    flex-wrap: wrap;
}

img {
    flex: 1;
    height: 200px; /* or whatever fixed height you need */
    max-width: 100%;
    object-fit: cover;
}

Here's a Codepen: https://codepen.io/wiiiiilllllll/pen/ZRMxpo