Css grid box auto height with dynamic list

Question

Hi im trying to make a list of my products

here is my sample code

<div class="parent">
<div class="child">
  <div class="grand-child">1</div>
  <div class="grand-child">1</div>
  <div class="grand-child">1</div>
 </div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
<div class="child">
  <div class="grand-child">2</div>
  <div class="grand-child">2</div>
</div>
</div>

and for my css

.parent{
 display: grid;
 gap: 10px;
 grid-template: repeat(5, 1fr) / repeat(4, 1fr);
 grid-auto-flow: column;
}

What I want is to remove all its bottom spaces. like this

with use of anything. dont need to be grid. can be flex or any other. also the count of child and grand child is dynamic depending on uploaded products and category. child = category grand-child = products

Thank you in advance.

a.mola · Accepted Answer · 2021-09-09T10:36:50.540

Using flexbox should work, but you'll need to specify the max-height so the elements wrap to the next column

.parent {
  display: flex;
  gap: 10px;
  flex-flow: column wrap;
  align-items: flex-start;
  max-height: 100vh;
}

<div class="parent">
  <div class="child">
    <div class="grand-child">1</div>
    <div class="grand-child">1</div>
    <div class="grand-child">1</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
  <div class="child">
    <div class="grand-child">2</div>
    <div class="grand-child">2</div>
  </div>
</div>

Is it possible to fit this to in 4 columns and container height is also auto adjust? thanks — ampedo, Sep 09 '21 at 23:53
You can use `width` to specify the width of a column to like `25%` that should force the 4 columns, problem is when you do that you must specify a height, else it won't wrap to the column and if the specifications are too small, then more columns are created. Overflowing the parent's width. — a.mola, Sep 10 '21 at 07:34

Css grid box auto height with dynamic list

1 Answers1