Grid column autofill - css

Question

I have a array which i want to be displayed within 3 columns.
Once the first column gets filled i want it to start populating the second row, so on to the third row.
My issue is that the current code the columns get an equal amount of (6x, 6x, 6x), but the desire is to populate the first column until max(100% height or x amount) then start populating the second and finally the third column if the array would be long enough.
JSX
export const Home = () => {
return (
<div className="container">
{
myArray.map((p, i) => {
return <div className="titleName" key={i}>{p.name}</div>
})
}
</div>
)
}
const myArray = [
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
{ name: "lol", age: 12 },
]
CSS
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: white;
}
Codepen:
https://codepen.io/Arasto/pen/PoZmoqy

Answer 1

You can use css column-count: 3; on the <div id="root"> This makes the text into 3 columns. column-fill: auto; populates the column fully and then goes on to the next column so they do not get an equal amount.
Woking example: https://codepen.io/Ajjarindahouse/pen/NWxjWaK