cross-posted from: https://lemmy.world/post/2692134

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.

  • FiniteLooper@lemm.eeEnglish
    3·
    1 year ago

    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);

    • Crul@lemmy.worldOPEnglish
      1·
      1 year ago

      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.

      Thanks!

  • Danatronic@lemmy.worldEnglish
    2·
    1 year ago

    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.