Column wrap after a specific number of child elements [duplicate]

Question

This is a Q&A on achieving a column wrap after a specific number of child elements using css Grid.

HTML mockup

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  .....
  <div class="child">n</div>
</div>

And the required layout is something like,

1  7   13
2  8   14
3  9   .
4  10  .
5  11  n
6  12

After a specific number of items(6 in this case), the remaining contents should be wrapped onto a new column.

Answer 1

You can achieve this with a combination of grid-template-rows and grid-auto-flow with a CSS like:

.parent {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-gap: 10px;
    grid-auto-flow: column;
}

Demo