优先用columns实现文字分栏，用grid实现精确控制的网格布局；columns轻量但仅适用于流式内容且不支持跨列，grid自由度高但需显式定义轨道。
多列布局该用
还是
？
看需求：要精确控制每列宽度、间距、对齐或跨列，选
；只是让文字或卡片像报纸一样自动分栏、不关心单列样式，用
更轻量。
是 CSS 原生
/
的封装，只作用于块内流式内容（比如
或带
的容器），对 Flex/Grid 子项无效；
则完全接管布局逻辑，自由度高但需显式定义列轨道。
文字分栏、博客正文、新闻摘要 → 优先
商品卡片网格、仪表盘卡片组、响应式表单布局 → 用
需要某一项横跨两列（比如 banner）→ 只能用
+
，
不支持跨列
类在实际中为什么经常“没反应”？
最常见原因是容器没设高度或最小高度，导致内容直接垂直铺满，没触发分栏；或者子元素用了
或
，破坏了多列流式上下文。
确保父容器有明确宽度（比如
）且不设
（除非你真想截断）
子元素避免用
、
、
，否则它们会脱离列流，变成整块“胶水”塞进第一列
若内容是卡片列表，别给外层加
，而应把卡片放进一个
再设
，且卡片本身用
防止被劈开
注意 Safari 对
的兼容性：iOS 15.4+ 和 macOS Monterey+ 没问题，但老版本可能漏掉
或错乱换行
系列类怎么避免响应式错位？
Tailwind 的
是基于
生成的，本质是固定列数。当内容宽度变化时，列宽会等比缩放，但不会自动增减列数——这点和
的“尽力分多少栏”完全不同。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
别混用
和
在同一容器上，CSS 层叠会导致不可预测行为
响应式断点要覆盖典型设备宽度：比如
，而不是跳过
直接从
开始
如果列内容高度差异大，加
或
控制行高一致性，否则会出现“阶梯状”错位
使用
而非
控制列间距，
是 grid 原生属性，不会影响子项盒模型
用
实现“等宽但自适应列数”的真正解法
很多人想用
达到类似
的“根据容器宽度自动决定列数”，但 Tailwind 默认不提供
这种类名。得靠
这类自定义值实现。
必须写在
里，不能用预设类，因为
/
不在默认配置中
中的
是单列最小宽度，太小会导致小屏下挤出横向滚动条
会合并空列，
会保留空轨道，多数场景选
这个写法在 JIT 模式下生效，但会略微增加构建体积；如用旧版 Tailwind，需手动加到
复杂点在于：这种写法无法和
完全解耦——比如你想在小屏用
、大屏用
，就得配
/
单独控制，否则
会覆盖所有断点。
gridcolumnsgridcolumnscolumnscolumn-countcolumn-gapdisplay: blockgridcolumns-3 md:columns-4grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4gridcol-span-2columnscolumnsdisplay: inline-blockfloatw-fullheightinline-blockfloatflexcolumns-3divcolumns-3break-inside-avoidcolumnscolumn-rulegrid-cols-grid-cols-grid-template-columnscolumnsgrid-cols-2columns-2grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4smmdgrid-auto-rows-mingrid-rows-[1fr]gappaddinggapgridgridcolumnsgrid-cols-fitgrid-cols-[repeat(auto-fit,_minmax(240px,_1fr)))]classNameauto-fitauto-fillminmax(240px, 1fr)240pxauto-fitauto-fillauto-fittheme.extend.gridTemplateColumnsgapgap-2gap-6gap-x-gap-y-gap