Unexpected behaviour of Row with multiple columns

[konrad-pawlus]

Hi, I'm using simple Row with 1, 2 or 3 columns depending on size. When used as in example:

<Row cols={{ lg: 3, md: 2, sm: 1 }}>

and screen is smaller than "sm" multiple columns appear.

Replacing above definition with workaround:

<Row cols={{ xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}>

solves this problem.

In my understanding expected behaviour would be that it would be enough to define Row as in example. Replacing this with pure Bootstrap CSS seams to work as expected.

[bestguy]

Hi @konrad-pawlus ,

Thanks, would you mind making a repl that shows the incorrect behavior? https://svelte.dev/repl/8ed6d1663e42490ea57b005cc12651f5?version=3.42.4

I want to make sure I understand the issue.

[konrad-pawlus]

Reply created: https://svelte.dev/repl/cc57e64d65ff4831b3dc66f8325bdeb1?version=3.42.4

Result when resized:

[bestguy]

Great thanks, will take a look

[bestguy]

So after looking this @konrad-pawlus , I'm wondering what criteria defines the correct/incorrect in your example.

My understanding of https://getbootstrap.com/docs/5.1/layout/grid/#row-columns is that if no breakpoints are used, then the col count will be consistent across all breakpoints. E.g. <Row cols={3}>. If no col size or breakpoints the column count will be whatever number of cols passed to the row.

If breakpoints are specified, the Bootstrap CSS behavior is for that breakpoint and above. For breakpoints not specified, the column count will be whatever number of cols passed to the row.

So in your "incorrect" example <Row cols={{ lg: 3, md: 2, sm: 1 }}> it seems expected xs breakpoint will show the 5 cols.

Does this make sense?

[konrad-pawlus]

My understanding was that this should behave exactly like Bootstrap, which is shown on second grid example in reply.

This is using min-width in Bootstrap ("We most commonly use min-width in our media queries", https://getbootstrap.com/docs/5.1/layout/breakpoints/ ) so second pure Bootstrap grid behaves as I would expect.

[bestguy]

I guess I'm confused by what you mean by "pure Bootstrap". Can you share the HTML+class names you are using? All this component does is export Bootstrap classes as well.

[konrad-pawlus]

I analyzed once more your explanation and how Bootstrap works and I think I misinterpreted how you map those cols parameters. Seams you ar right it works as it should. Thank you!