Make grid extension allow slides of different heights / Add possible optional "row mode"?

[kristiansp]

I'm using the grid extension to show two rows of movie listings, and the powerful grid extension is super useful. I want the carousel to move one column at the time, so I basically use the setting rows: 2, cols: 1. So far, so good.

I have run into a little snag, though. As each slide height is a ratio of the number of rows (e.g. in my example with 2 rows, each slide is 50% of the height of the carousel), you risk one item being cut off if one of the rows contain an element of different height than the other (in my case, if a movie title is longer than normal, and breaks over multiple lines).

My dream would be that each row could have it's own height based on the tallest slide, like in a normal non-grid carousel. But since, technically, they are individual columns, that's not possible in any clean way.

I was thinking of a potential conceptually simpler solution, which could be an optional "row mode" when using the row and cols attributes. What I'm picturing is that in this mode, conceptually, is that the slides are laid out as (in my case) two individual tracks (or lists, I'm not sure what would be the most meaningful element, conceptually) that are controlled by the same navigation, and move as one. This way they could have individual heights. (I realise this can not possibly work with dimensions, as the number of rows and columns can vary from slide to slide.)

Ideally, I would also like the rows to be of as equal length as possible. If we take the example of a page showing a grid that is 4x2 at a certain breakpoint (4 columns, 2 rows), I would prefer it to work like this:

• Up to 4 slides: Fill the top row only
• 4–8 slides: Fill the first and second row (no navigation needed, still one page)
• More than 8 slides: Distribute the slides evenly, e.g. 11 slides in total gives 6 colums, where the last column only has one slide in the top row)

This way, I was picturing the "only" logic change would be in distributing the slides into the rows using as few columns as possible, and place them in otherwise identical "splide tracks" that are controlled by the same navigation. I was picturing then that actually most normal options could still work as with normal carousels, e.g. the perMove option could apply to how many columns to move.

I hope this makes sense, and I'm curious to hear what others think.

[h-imko]

This shoud work for equal rows based on the tallest

`.splide__slide__row {
height: auto !important;
}

.splide__slide:has(.splide__slide__row) {
display: grid;
grid-auto-rows: 1fr;
}`