Numbered list sequence changes on Grids

Hi, i’m making a list of my expertise on my portfolio site and having some issues with grids. When its a 2 column grid, everything is numbered perfectly, 1-4 runs down column 1 and 5-8 runs down column 2. But when it goes to mobile, so 1 column, the numbers mess up. Instead of dropping the last 4 numbers under the first 4, it mixes them up in between, which means the number sequence messes up also. I need the list to be numbered and in this sequence. Is there a solution to this? Please see desktop and mobile screenshots attached. Thanks in advance.

Here is my public share link:

Hi Tark,

It sounds like you have your grid built as a 2 column grid, with the element flow across-then-down.
Your items are probably static elements, so the number part is arbitrary, and is in fact 01, 05, 02 06… which looks right in your 2 column grid, and looks wrong in your 1 column.

If you will always have only 8 items, you can;

  • change your grid to flow vertically, down-then-across
  • set it to 4 rows, auto col 1fr on desktop
  • on mobile, add 4 more rows for a total of 8 rows
  • re-order your static elements correctly so they are numerically sequential, 01 - 08

On desktop, that will flow downwards for 4 rows, then break to a new column for the next for.
On mobile, it will continue for the full 8 rows.

Thanks @memetican

How do I change the grid to flow vertically? your first bullet point. thanks

Horizontal / Vertical is right at the top of the grid settings panel

@memetican the only time it gives me an option for horizontal/vertical is when I change it to Flex rather than Grid, see image attached. With Flex it doesn’t go in to 2 column as I need it to, it drops into 1 column.

Screenshot 2024-01-26 at 11.54.13
Screenshot 2024-01-26 at 11.54.29

@memetican here is the designer read-only link:

In grid the name of the setting is direction. Row flows across first, then down, and creates additional rows if needed. Column flows down columns then across, and creates additional columns if needed.

Flex is much more loosely structured and does not have a concept of columns. It depends on the item sizes themselves to determine layout.