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?

You can define a fixed height for the rows ` grid-auto-rows: 150px;` and this for the columns grid-template-columns:repeat(auto-fill,150px); the max width for the columns will be 150px, you might see some overlaps, if so you need max-width:100% — user7148391
– user7148391, Commented Jun 26, 2018 at 14:11

wiiiiilllllll · Accepted Answer · 2018-06-26 13:21:40Z

2

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

answered Jun 26, 2018 at 13:21

wiiiiilllllll

5776 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related