响应式：同一内容，不同排法

Tailwind 默认从小屏开始：

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">

没有前缀的一列先管手机；达到 md 后两列；达到 lg 后三列。断点描述屏幕宽度，不是某个具体品牌设备。

检查三种尺寸

1. DevTools 点设备图标。
2. 选约 390px 检查手机单列和点击区域。
3. 选 768px 或 820px 检查竖屏 iPad。
4. 选 1024px 检查横屏 iPad。
5. 注意横向溢出、按钮能否触摸、文字是否过挤。

md:grid-cols-2 会让所有手机都显示两列吗？

答案：不会。只有屏幕达到 md 断点后才变成两列。