SOLVED: by @[email protected] using columns property

TL;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.

  • @[email protected]OP
    1•11 months ago

    If that’s the case, I think 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.

    Thanks!

    • @eluvatar
      2•11 months ago

      Well you can do a little math to figure it out yourself in that case.

      --row-count: item-count / column-count (you need to substitute the item and colum count yourself) You can do something like that in an inline style to define the number of rows. Then in your css define do this grid-template-columns: repeat(var(--row-count), 1fr); this will make it so that the row count is defined in the html which can be dynamic without having to change the css.

      • @[email protected]OP
        1•11 months ago

        (If the ideal solution is not possible) I think you are right.

        Let me check I understood: the idea is to have a single changing-magic-number (the number of menu options) set in a variable --item-count and then calculate all the other values from that. The --column-count would be fixed for each resolution step, so that’s ok.

        Thank you very much for the help!

        • @eluvatar
          2•11 months ago

          Yeah more or less. I’m not sure what’s rendering your html though, myself I’d do the math in js and just set the row-count variable off the value in the inline style, but it depends on what’s doing your dynamic rendering.

          • @[email protected]OP
            1•11 months ago

            Yep, a bit of JS is another option.

            I’m not sure what’s rendering your html though

            Nothting really, I wanted to keep the project very simple (because there are non-devs contributing to it) and the HTML is static code.