css grid layout auto adjust column and rows

Question

I am creating a grid with a dynamic content. I want to adjust the column like. if the column height is less then put two, three column in one column. If the column height is more then put one column.

I want column3 go under coulmn2 and column4 go to column3 position and so everything adjust according to the content

{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
}

Answer 1

then create Masonry Masonry Layout