Kevin Powell - Community•7mo ago

grid container with flexible rows?

i'm not sure if this is the right title but here we go. so i wanted to have a grid container with 3 columns. these columns have the same width. my items in it has the height of a max-content, when rendered i wanted the items to be right under each other without the grid's row height but i cant find my way around it. is there a way to set the rows in a dynamic way? or am i in the wrong path? maybe 3 columns and those columns should have flexboxes in it ? i am very lost atp. i dont have much experience with grids and english is not my first language so sorry if i dont make sense here's my codes:

  grid-container{
    width: max-content;
    display: grid;
    grid-template-columns: repeat(3, 250px);
    gap: 1rem;
    padding: 1rem;
}
.entry{
  height: max-content;
}

  grid-container{
    width: max-content;
    display: grid;
    grid-template-columns: repeat(3, 250px);
    gap: 1rem;
    padding: 1rem;
}
.entry{
  height: max-content;
}

2 Replies

clevermissfox•7mo ago

You want all the rows to be the same size when you say

When rendered I wanted the items to be right under each other

, is that correct? If so remove the height property from .entry . The rows will stretch by default. If I’m not understanding that correctly, my next suggestion would be to set grid-auto-rows

MarkBoots•7mo ago

I think you want a masonry layout in grid. Unfortunatly that is not (yet) possible in grid. They are working on it. you can use CSS Column layout (but the order of childs will be different) or use a js library

Gaming

Programming

grid container with flexible rows?