[BUG] - Grid sizes shift

[luixo]

Describe the bug

Hello, Documentation states that Grid component accept various size props: xs, sm, md, lg and xl, they should be boolean. Actually, they are number which define amount of 1/12 shares of the container.

The actual problem is that xs size actually applies on 650px-960px, not <= 650px as stated in docs. Also, there is no way to add styling for <= 650px layout.

The reason is this code: https://github.com/nextui-org/nextui/blob/main/packages/react/src/grid/grid-item.tsx#L112-L119

I'm not sure how that should be approached as I'm not familiar with repo's rules. Let me know if I can make a PR on that, but I need a direction.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Render Grid component with xs={1} and sm={12}
2. Fiddle around with screen size
3. On <= 650px as well as on 650px-960px there would be 1 share, over 960px there would be 12 shares.

Expected behavior

Expected xs style to apply on <= 650px window size

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Chrome

[uki-strzelecki]

Hi, I hope to add a bit there. I have made an example here.

Iit looks like xs sets up 0-960px range (which is also not what is expected). This can be seen in the lower grid of the sandbox. And as the original author mentioned, there is no way to set the ranges 0-650, 650-960 separately.

I tried via css, however, this also does not seem to work properly, which can be seen in the upper grid presented in the sandbox.

• First, it looks like setting @xs overwrites all other breakpoints setup - once this is set up, other breakpoints do not matter.
• Second, without setting up @xs I can get almost all ranges to work, except 650-960. For 0-650 @xsMax works well.

Please forgive me if I got something wrong.

[lhthang96]

Same problem, I inspected the class attributes and looks like the media query value of sm is set at 960px, md is set at 1280px.

[jrgarciadev]

Hey guys @luixo @lhthang96 , the @xs, @sm, @md, @lg and @xl are the same as @xsMin, @smMin, etc..., which means the media query starts working after that specific breakpoint if you want a media query <=650px you should use xsMax and the same for the other media queries, here's the complete list https://nextui.org/docs/theme/media#media-queries

 // `bpMin` shortcuts 
  xs: `(min-width: 650px)`,
  sm: `(min-width: 960px)`,
  md: `(min-width: 1280px)`,
  lg: `(min-width: 1400px)`,
  xl: `(min-width: 1920px)`,

 // bpMin
  xsMin: `(min-width:650px)`,
  smMin: `(min-width: 960px)`,
  mdMin: `(min-width: 1280px)`,
  lgMin: `(min-width: 1400px)`,
  xlMin: `(min-width: 1920px)`,

 // bpMax
  xsMax: `(max-width: 650px)`,
  smMax: `(max-width: 960px)`,
  mdMax: `(max-width: 1280px)`,
  lgMax: `(max-width: 1400px)`,
  xlMax: `(max-width: 1920px)`,

Hope it clears the confussion

[luixo]

Is there a way to apply two types of rules "at least X px" and "at max X px"? I implemented that manually in my project, but that's what xsMin / xsMax sounds for me.

[lhthang96]

Hi @jrgarciadev , thank you for your response.

In my case, I'm using the Grid component. Based on the documentation, we can make the layout responsively by defining the value of xs, sm, md, lg and xl (as similar to the way I have been using grid system of other UI libraries)

I made an example to illustrate my case in this sandbox. I set the width value to 959px, it should meet the sm value and take the 50% width instead of 100%.

You mentioned the xsMax query in the answer, but I cannot find a way to use it in the Grid component. Please let me know if I missed anything or got the wrong way in using the grid system.

[uki-strzelecki]

Hey guys @luixo @lhthang96 , the @xs, @sm, @md, @lg and @xl are the same as @xsMin, @smMin, etc..., which means the media query starts working after that specific breakpoint if you want a media query <=650px you should use xsMax and the same for the other media queries, here's the complete list https://nextui.org/docs/theme/media#media-queries

 // `bpMin` shortcuts 
  xs: `(min-width: 650px)`,
  sm: `(min-width: 960px)`,
  md: `(min-width: 1280px)`,
  lg: `(min-width: 1400px)`,
  xl: `(min-width: 1920px)`,

 // bpMin
  xsMin: `(min-width:650px)`,
  smMin: `(min-width: 960px)`,
  mdMin: `(min-width: 1280px)`,
  lgMin: `(min-width: 1400px)`,
  xlMin: `(min-width: 1920px)`,

 // bpMax
  xsMax: `(max-width: 650px)`,
  smMax: `(max-width: 960px)`,
  mdMax: `(max-width: 1280px)`,
  lgMax: `(max-width: 1400px)`,
  xlMax: `(max-width: 1920px)`,

Hope it clears the confussion

I am saddened to see this issue being neglected. The usage of those breakpoints as implemented is counter-intuitive for xs, especially because it does not match the official documentation. This has implications for the Container fluid prop not working as expected. This should be changed in the implementation, rather than asking everyone to set the xsMax styling... This is being mentioned over and over again in the form of new github issues or discord questions. It is a bad user experience.

#757 #754 https://discord.com/channels/856545348885676062/886605174162989068/1020858780088541204 https://discord.com/channels/856545348885676062/886605174162989068/999132658296696833

I eventually managed to size my grid correctly, but it took me more than 2 hours to figure it out. Something that should take me a minute. sandbox.

Regards