css Question posted in
Some basic documentation can be found here.

Css – How to have dynamic rows when using grid-auto-flow: column?

It seems it just didn’t fully understand the css grid mechanics. So here I am:

ul{
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  max-width: 888px;
  margin: 0 auto;
}
<ul>
  <li><a href="#">Aziende agricole</a></li>
  <li><a href="#">Dove mangiare</a></li>
  <li><a href="#">Dove dormire</a></li>
  <li><a href="#">Botteghe</a></li>
  <li><a href="#">La Molonara</a></li>
  <li><a href="#">I Stròdi</a></li>
  <li><a href="#">La Tèra crèa</a></li>
  <li><a href="#">Eventi</a></li>
  <li><a href="#">Didattica</a></li>
  <li><a href="#">Contatti</a></li>
</ul>

As you can see, it works, but apparently I have to define a fixed number of rows. And if I have more elements, another column will be created instead of another row.
Is there a way to solve, other than using grid-auto-flow: row? I’m using column because I need that items distribution, like:

Aziende agricole
Dove mangiare
Dove dormire

And not

Aziende agricole    Dove mangiare    Dove dormire
Tags:

2

Answers


  1. 0

    According to my knowledge grid row only works when we specify a fixed height.u can remove grid-auto-flow : columns inorder to maintain three columns even when elements increases

    Login or Signup to reply.
  2. 0

    try this

     display: grid;
 grid-auto-flow: column;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
 max-width: 888px;
 margin: 0 auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search