SOLVED: by @g6d3np81@kbin.social 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.

  • Crul@lemmy.worldOP
    link
    fedilink
    arrow-up
    1
    ·
    1 year 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@programming.dev
      link
      fedilink
      arrow-up
      2
      ·
      1 year 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.

      • Crul@lemmy.worldOP
        link
        fedilink
        arrow-up
        1
        ·
        1 year 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.