Kevin Powell - Community•2mo ago

How to get a grid inside a flex wrapper to always have the same height as one of its rows

I'm making a personal site and on my about page I have two grids with the same styling, same amount of items (images) which also all have the same height, I want my grids to have their height be the same height as one row of images (so the same height as an image) keep in mind this grid is on a flex container and my site is also mobile friendly so height of the images changes with the window size You can see it here on CodePen: https://codepen.io/CloudyInside/pen/empJpGo

Claudia S. M.

CodePen

Grid with height of one row

Need help trying to get a grid to consistently have the height of one row, all rows are the same height....

10 Replies

Rägnar O'ock•2mo ago

if the card's have a fix aspect ratio (and they look like they do) you can do it with some container query magic

Rägnar O'ock•2mo ago

applied here : https://codepen.io/ragnar_ock/pen/PwPZZPB?editors=1100

Rägnar O'ock

CodePen

Grid with height of one row

Need help trying to get a grid to consistently have the height of one row, all rows are the same height....

Rägnar O'ock•2mo ago

basically the idea is to set a container of type inline-size on the grid itself. compute the width of a single column like so --col-width: calc(100cqw / var(--nb-cols)); remove the gap between the columns like this --remove-gap: (var(--gap) / (var(--nb-cols) - 1)); and multiply that by the desired aspect ratio of --item-aspect-ratio: 3 / 2; all that gives you the value of the height of one item, which is the size you want for your grid container :

.gallery {
  
  --gap: .5rem;
  --nb-cols: 4;
  
    display: grid;
    grid-template-columns: repeat(var(--nb-cols), 1fr);
    grid-auto-flow: row;
    margin-bottom: 1rem;
    gap: var(--gap);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  
  --col-width: calc(100cqw / var(--nb-cols));
  --remove-gap: (var(--gap) / (var(--nb-cols) - 1));
  --item-aspect-ratio: 3 / 2;
  
  max-height: calc((var(--col-width) - var(--remove-gap)) * var(--item-aspect-ratio));
}

.gallery {
  
  --gap: .5rem;
  --nb-cols: 4;
  
    display: grid;
    grid-template-columns: repeat(var(--nb-cols), 1fr);
    grid-auto-flow: row;
    margin-bottom: 1rem;
    gap: var(--gap);
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  
  --col-width: calc(100cqw / var(--nb-cols));
  --remove-gap: (var(--gap) / (var(--nb-cols) - 1));
  --item-aspect-ratio: 3 / 2;
  
  max-height: calc((var(--col-width) - var(--remove-gap)) * var(--item-aspect-ratio));
}

(BTW, you have a loooot of useless flex containers that are only making things harder to work with)

C☁OP•2mo ago

I know 😅 I'm a beginner and this is my first time making a full on site) I'll try cleaning up the structure

Rägnar O'ock•2mo ago

you can remove all your flex containers and width/height and still get the same layout as you have currently don't be afraid of leaving block and inline elements flow by themselves

C☁OP•2mo ago

Thanks a lot for the solution, that was very quick!

Rägnar O'ock•2mo ago

you get faster with practice XD

C☁OP•2mo ago

I followed your advice and tried to simplify my html structure and css as much as possible, shaved off a couple hundred lines from the css! You can have a look here if you want basilsgarden.netlify.app/en (the img grid you helped me with is in the about section)

Rägnar O'ock•2mo ago

looking good (you might need a scrollable indicator on it tho, it's not obvious that it's scrollable

C☁OP•2mo ago

Glad you liked it I will add the indicator thanks ^^

Gaming

Programming

How to get a grid inside a flex wrapper to always have the same height as one of its rows

Did you find this page helpful?