cross-posted from: https://lemmy.world/post/2692134
SOLVED: by @g6d3np81@kbin.social using
columns
propertyTL;DR: I want to achieve this behavior for the menu layout, but all I can get is this; note the different menu options order.
Two days ago I asked for help 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.The only difference being that I want the chapters to be sorted vertically (as in the current version), 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 and saw this StackOverflow post: 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) but it just renders a single row. 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.
If I understand correctly (50/50 chance given my knowledge :P), that's what I got from the comment thread in the other post. But please correct me if I'm wrong.
Thanks for the suggestion!