in CSS grid is it possible to use flex direction column for specific rows

I have these items in a grid:

01 02 03 04
05 06 07 08
09 10 11 12


My code looks like this:


.grid {
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
gap: 10px;

& > div {
padding: 5px;
background-color: #ccc;
}
}

<div class="grid">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
<div>08</div>
<div>09</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>

But what I need is this:

01 03 05 07
02 04 06 08
09 11
10 12


The solution needs to work with any number of grid items and must use auto-fit (the number of columns is unknown and depends on the available width).

I've simplified the code but in reality this lives within a @for loop within the Angular framework.

Is it possible with CSS grid? Many thanks

Continue reading...