[SOLVED using `columns`] I cannot list items vertically in columns using display: grid
cross-posted from: https://lemmy.world/post/2692134
> SOLVED: by @[email protected] [using `columns` property](https://mlmym.org/lemm.ee/comment/2050770)
>
> TL;DR: I want to achieve [this behavior for the menu layout](https://crul.github.io/CursoRelatividadGeneralJavierGarcia/), but [all I can get is this](https://i.imgur.com/me2RPva.png); note the different menu options order.
>
> Two days ago [I asked for help](https://old.lemmy.world/post/2566953) for implementing the current behavior without hardcoding the menu height for each resolution step, and there were two suggestions to try `display: grid`. It looked promising and after reading some documentation I was able to get [something very close to what I'm looking for](https://i.imgur.com/me2RPva.png).
>
> The only difference being that I want the chapters to be sorted vertically (as [in the current version](https://crul.github.io/CursoRelatividadGeneralJavierGarcia/)), but what I got sorts the chapters horizontally.
>
> Here it is (what I think is) the relevant code:
>
> #menu ul {
> display: grid;
> grid-template-columns: 1fr 1fr 1fr 1fr;
> grid-auto-flow: row dense;
> }
>
> Sorry, I don't have the `display: grid` version online.
>
> I did a quick search for [display grid multiple columns vertical sort](https://www.google.com/search?q=display+grid+multiple+columns+vertical+sort&newwindow=1&hl=en) and saw this [StackOverflow post: CSS Grid vertical columns with infinite rows](https://stackoverflow.com/questions/44906501/css-grid-vertical-columns-with-infinite-rows) which, if I understand correctly, says it's not possible. But I'm pretty sure I'm not understanding it correctly.
>
> Any help will be welcome, thanks!
>
> EDIT: I also tried `grid-audto-flow: column` (as [suggested here](https://lemmy.world/comment/2095002)) but [it just renders a single row](https://i.imgur.com/ARhEad0.png). Probably because I'm missing something...
>
> #menu ul {
> display: grid;
> grid-template-columns: 1fr 1fr 1fr 1fr;
> grid-auto-flow: column;
> }
>
> EDIT-2: I was told that for `grid-audto-flow: column` to work I need to specify the numbers of columns. If I understand correctly, then that doesn't really help. The original issue is that I need to edit the CSS file every time a new chapter is added. Which would be the same if I have to hardcode the number of rows.
>
> I mean, it's a bit cleaner to hardcode the number of rows than the height in pixels, but I was looking for a solution that doesn't require magic numbers in the CSS.
> SOLVED: by @[email protected] [using `columns` property](https://mlmym.org/lemm.ee/comment/2050770)
>
> TL;DR: I want to achieve [this behavior for the menu layout](https://crul.github.io/CursoRelatividadGeneralJavierGarcia/), but [all I can get is this](https://i.imgur.com/me2RPva.png); note the different menu options order.
>
> Two days ago [I asked for help](https://old.lemmy.world/post/2566953) for implementing the current behavior without hardcoding the menu height for each resolution step, and there were two suggestions to try `display: grid`. It looked promising and after reading some documentation I was able to get [something very close to what I'm looking for](https://i.imgur.com/me2RPva.png).
>
> The only difference being that I want the chapters to be sorted vertically (as [in the current version](https://crul.github.io/CursoRelatividadGeneralJavierGarcia/)), but what I got sorts the chapters horizontally.
>
> Here it is (what I think is) the relevant code:
>
> #menu ul {
> display: grid;
> grid-template-columns: 1fr 1fr 1fr 1fr;
> grid-auto-flow: row dense;
> }
>
> Sorry, I don't have the `display: grid` version online.
>
> I did a quick search for [display grid multiple columns vertical sort](https://www.google.com/search?q=display+grid+multiple+columns+vertical+sort&newwindow=1&hl=en) and saw this [StackOverflow post: CSS Grid vertical columns with infinite rows](https://stackoverflow.com/questions/44906501/css-grid-vertical-columns-with-infinite-rows) which, if I understand correctly, says it's not possible. But I'm pretty sure I'm not understanding it correctly.
>
> Any help will be welcome, thanks!
>
> EDIT: I also tried `grid-audto-flow: column` (as [suggested here](https://lemmy.world/comment/2095002)) but [it just renders a single row](https://i.imgur.com/ARhEad0.png). Probably because I'm missing something...
>
> #menu ul {
> display: grid;
> grid-template-columns: 1fr 1fr 1fr 1fr;
> grid-auto-flow: column;
> }
>
> EDIT-2: I was told that for `grid-audto-flow: column` to work I need to specify the numbers of columns. If I understand correctly, then that doesn't really help. The original issue is that I need to edit the CSS file every time a new chapter is added. Which would be the same if I have to hardcode the number of rows.
>
> I mean, it's a bit cleaner to hardcode the number of rows than the height in pixels, but I was looking for a solution that doesn't require magic numbers in the CSS.