Responsive CSS grid with column direction

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:
https://jsfiddle.net/artrayd/uhmr1psd/17/

Try making window smaller, as you can see all numbers above 6 comes out of screen.

Any help is highly appreciated :pray:

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 :+1:

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 :slight_smile:

1 Like

Glad you found out :smile: