如何为Tailwind Grid设置不同屏幕的列数？md及以下适配异常

你的问题出在对Tailwind响应式前缀的逻辑理解上——Tailwind的响应式前缀是最小宽度触发，比如md:代表屏幕宽度≥768px时生效，而非“md及以下”。

你之前的写法grid grid-cols-3 md:grid-cols-2实际效果是：所有屏幕默认用3列，当屏幕达到md尺寸及以上时改成2列，这和你想要的需求完全相反。

要实现「大屏及以上用3列，md及以下用2列」的效果，正确的写法是：

class="grid grid-cols-2 lg:grid-cols-3"

这里用lg:作为大屏的断点（默认对应1024px），逻辑是：

• 屏幕宽度<1024px（包含md、sm、xs尺寸）时，使用默认的grid-cols-2
• 屏幕宽度≥1024px（大屏及以上）时，切换为lg:grid-cols-3

如果你的“大屏”定义和Tailwind默认的lg断点不同，可以根据需求替换成对应的前缀，比如用xl:（1280px）。

Tailwind默认断点参考：

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

内容的提问来源于stack exchange，提问作者sheetaldharerao