Grid span column

I’m exploring this I created a grid in which one component should take 2 column span and rest of them should take as per the other column value set. It looks good in desktop view but in mobile view I see two columns though I set 1 column for small screens.

and this is the mobile view

where you can see the problem

and this is the code

small : 1, large : 4, one div should take 2 column span. What am I missing here ?

and this is based on

can I get some help on this ?

to the best of my knowledge, this is not possible. It’s major shortcoming in the css grid layout model.

Or, in other words, you can’t prevent the span from creating new columns. You need to define a breakpoint (using a media query) below which that span is 1 instead of 2. And the Lumo utilities don’t have a way to do that, so you’ll have to write css for it.

I see Bootstrap has this feature. May be LumoUtility can adopt something from that

Just add bootstrap.

yeah, that works too

how to create this scenario ? as per the picture one div takes 4 columns and rest of them takes 1