Tricky CSS Grid items direction!

[brfignoni]

Hi!

I am working on a responsive grid layout that is almost perfect. What I would like to improve, is the items direction. Currently they flow in a “row-like” direction. I would like them to flow in a “column-like” direction. I am attaching images for clarification.

On the left, red arrows, my current flow.
Ont the right, green arrows, the flow that I would like to achieve.

The public page:
https://aquamarine-peony-5a9c60.netlify.app/mercury/tokens

any help will be much appreciated. No js please.

[rpg_digital]

I have to go out now, but a quick thought. I wonder if something like this would work?

writing-mode: vertical-lr;
text-orientation: upright;

writing-mode - CSS: Cascading Style Sheets | MDN

[PaulOB]

@brfignoni

https://aquamarine-peony-5a9c60.netlify.app/mercury/tokens

How about just using css columns instead.

e.g.

.type__list[_ngcontent-ng-c872978985]{
    display:block;
    columns:3;
  column-width:300px;
}

Basic example:

[brfignoni]

Hi @rpg_digital

I tried it, but it did not work fine:

Thanks for your suggestion

[brfignoni]

@PaulOB

This worked!
Thank you very much. I am begining my Monday happy.

Now it looks so much better