I am working on a responsive layout, in the larger screens it will have 3x3 layout. The 1st column will be filled first. Once there are 3 items in the first column, the 2nd column will start to fill. And when there are 6 items in the first 2 columns, the 3rd column will start to fill. So up to 9 items they will be filled in this logic.But if there are more than 9 items, they will create extra rows. Below picture is a good representation of what I am trying to create
I have tried both grid-auto-flow: row and grid-auto-flow: column but none working correctly. Please give me idea about how can this be implemented, if possible. If not what is the alternate way to do this?