How to make CSS Grid items stack tightly without gaps caused by varying heights?
I have a parent grid container with 4 columns and 5 child divs:
The first div has a list with fewer items (shorter height).Divs 2-4 have lists with more items (taller heights).The fifth div should appear directly below the first div.Problem:Div 5 ends up in a new row but leaves a large gap below Div 1 due to the taller heights of Divs 2-4.
Code Example:
<div class="main-grid"><!-- ستوناولباآیتم۱و۵ --><div class="column-1"><div class="grid-item item-1"><h3>لیست۱ (ارتفاعکمتر)</h3><ul><li>آیتم۱</li><li>آیتم۲</li></ul></div><div class="grid-item item-5"><h3>لیست۵ (بدونفاصله)</h3><ul><li>آیتم۱</li><li>آیتم۲</li><li>آیتم۳</li></ul></div></div><!-- ستونهای۲تا۴ --><div class="columns-2-4"><div class="grid-item item-2"><h3>لیست۲ (ارتفاعبیشتر)</h3><ul><li>آیتم۱</li><li>آیتم۲</li><li>آیتم۳</li><li>آیتم۴</li><li>آیتم۵</li></ul></div><div class="grid-item item-3"><h3>لیست۳ (ارتفاعبیشتر)</h3><ul><li>آیتم۱</li><li>آیتم۲</li><li>آیتم۳</li><li>آیتم۴</li><li>آیتم۵</li><li>آیتم۶</li></ul></div><div class="grid-item item-4"><h3>لیست۴ (ارتفاعبیشتر)</h3><ul><li>آیتم۱</li><li>آیتم۲</li><li>آیتم۳</li><li>آیتم۴</li></ul></div></div></div>