Hello all,
I am struggling with making display: grid element responsive after I used this property:
grid-auto-flow: column dense
Here is my fiddle:
Try making window smaller, as you can see all numbers above 6 comes out of screen.
Any help is highly appreciated 
I have no idea what you want you want with the code above, since you have no holes. But i made a little change to your CSS:
ul{
display: grid;
/* grid-auto-flow: column dense; */
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
/* width: 100%; */
column-gap: 72px;
row-gap: 32px;
}
li{
display: flex;
/* width: 100%; */
align-items: center;
}
div{
display: block;
/* flex-shrink: 0; */
/* width: 30px; */
/* height: 30px; */
/* the code commented above will do the same as the next 2 lines below */
min-width: 30px;
min-height: 30px;
background: #ccc;
border-radius: 50%;
margin-right: 20px;
}
@samolex thank you for help 
In this way I could make it responsive without any problem.
The issue that I want my items going upside down in according to numeric order like
1 4 7 10
2 5 8 11
3 6 9 12
To achieve that I added this line:
grid-auto-flow: column dense;
That’s kind of direction similar to flex-direction: column, but for grid.
After adding this line I couldn’t make it responsive
You might need to read a bit about grid -auto-flow --when it applies.
In short, as far as i know, it is used when there are holes in the Grid container.
this might help: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow
To get what you want, i suggest using another method.
With this i think you can’t get more than one column. flex container is one dimensional.
if I was trying to achieve this, i would have also gone with the grid display with a number of columns (depending on screen sizes) and use the line placement to position the items.
@samolex Hm, you are right… That was complicated to do, because I designed it in wrong way. My items (alphabet) should go from left to the right and not upside down 
Glad you found out 