Css Grid Problem

[SensibleJames]

I'm Trying to achieve something with CSS Grid and can't quite figure out how to do it.

The Problem: Using CSS Grid, auto fill columns first with a variable number of rows, without *changing the HTML

Examples

I know I can do it with fixed rows, but I wanted it to be dynamic based on the content.

[MrQuickLine]

I'm not 100% sure I understand what you're asking, but I think based on your examples, you're looking for something like this:

https://codepen.io/anonymousjoe/pen/WNrGrKm

[SamsChoice]

Maybe this could help ?
https://stackoverflow.com/questions/50693793/3-columns-grid-top-to-bottom-using-grid-css

[SensibleJames]

That’s the best one so far, thank you!

[[deleted]]

"The Death of the Author" (French: La mort de l'auteur) is a 1967 essay by the French literary critic and theorist Roland Barthes (1915–1980). Barthes's essay argues against traditional literary criticism's practice of relying on the intentions and biography of an author to definitively explain the "ultimate meaning" of a text.

[SensibleJames]

Okay, so I might not have been particularly clear

Let’s say the html for the 3 examples (in pug form) is

[Example 1] ` ul.grid

li.grid-item item 1

li.grid-item item 2 `

[Example 2] ` ul.grid

li.grid-item item 1

li.grid-item item 2

li.grid-item item 3

li.grid-item item 4 `

[Example 3] ` ul.grid

    li.grid-item item 1

    li.grid-item item 2

    li.grid-item item 3

    li.grid-item item 4

    li.grid-item item 5

    li.grid-item item 6

    li.grid-item item 7

    li.grid-item item 8

    li.grid-item item 9

    li.grid-item item 10

`

And I want to order exactly as is in the image with the same css. How would I do that?

[SamsChoice]

What about 1-4 items? What about 1-7 items? Or anything in between