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.
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.
grid-template-columns defines how many columns there are. You have 1fr 1fr 1fr which defines three columns, each one being “1 fractional width”.
If I’m understanding your situation correctly then you just need to use grid-template-columns: 1fr; to get a single column layout here.
FYI, something I like doing for grid layouts is to use the repeat function which saved you from writing 1fr a lot and from counting how many there are in code. grid-template-columns: repeat(3, 1fr);
If I’m understanding your situation correctly then you just need to use grid-template-columns: 1fr; to get a single column layout here.
I don't want a single column, there should be different number of columns for each resolution step.
From the comments in the OP, I think I still need a single magic number (the number of menu options) and then I can use grid-auto-flow: column; and calculate the number of rows for each resolution step.
I think you could make grid-auto-flow: column work if you had a fixed height for the whole grid and set grid-auto-rows. You might still need a magic number to set the height based on the number of items if you want each column to be equally divided.
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.