CODEWITHSUNDEEP
csscss-grid
jacobdo
jacobdo

Reputation: 1615

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

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

grid-example

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?

Upvotes: 0

Views: 1750

Answers (1)

wiiiiilllllll
wiiiiilllllll

Reputation: 577

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

Upvotes: 2

Related Questions