这不是在说反话：我真的很想知道 CSS 多列布局的优秀用例。
答案似乎很简单。当您想将任何内容拆分为多列时，使用列，对吧？通常，您会在展示 CSS 多列布局工作原理的文章中找到此类示例，包括我们自己的 年鉴
没错。但这真的是一个实际的用例吗？也许吧。 如果文本相对较短，那么它可能是一个不错的点缀。几年前，在重新设计我的网站时，我就是这样说服自己的 几年以前。现在不是这样了，但这就是它当时的样子
但是将整篇长篇文章拆分为多列？我喜欢报纸上的这种格式，但我不太想向下滚动网页阅读一列，然后又向上滚动阅读另一列。
我想我们可以用它来并排放置两个元素，但 Flexbox 更适合这种情况。此外，一个限制阻止我们选择列并单独调整它们的大小。列必须具有相同的宽度。
列的一个优点是，它是唯一一种可以分段内容的 CSS 布局方法。（除非我们算上 CSS 区域…… 它们怎么了？！）因此，如果您想将段落拆分为多列，则无需额外的包装器即可实现。
您还需要在哪些情况下将连续的文本块拆分为多列？我记得在处理一个很大的无序项目列表时需要这样做。我喜欢列表使内容易于扫描的方式，但长列表会使页面的一侧看起来非常沉重。例如，假设我们正在按字母顺序对 CSS-Tricks 的所有帖子标签进行列出。多列布局非常适合这种情况
继续调整视口宽度。定义了三列，但数量会根据可用空间的数量而变化。必须喜欢所有这些响应式效果，而无需使用媒体查询！
我正在为 :left 伪类制作一个演示，并使用了 columns，因为它是一种为打印演示分段内容的好方法。因此，我想这是一个其他用例。在制作演示的过程中，我意识到可以使用多列布局创建项目（如图片库）的砌体网格
但还有其他什么？我们是否仅限于短段落、长列表和自由流动的网格？
我使用过 css 列来显示节日的时间表。列使能够逐列对齐项目，而使用 flexbox 或 grid 将按行对齐项目，这是不可取的。为了保持块的完整性并避免断开它们，我需要在它们上使用 display: table。
为了避免列内的子元素被拆分，我认为可以使用 break-inside:avoid 属性。我本周第一次尝试使用它，似乎效果很好。
这对于打印样式很有用，在打印样式中，您可能希望文章中的扩展文本能够高效地打印在较少的纸张上。
当您有扩展的项目列表时，列也很有用。与 :has() 结合使用，它非常强大。例如，找出列表是否包含这么多项目。如果包含，则以列的形式设置列表。参见 https://codepen.io/jen4web/pen/RwMEYyB
我曾经用它们来显示一个很长的复选框列表（复杂数据表的列选择器）。它们需要适合对话框。
脚注，尤其是在学术风格的参考文献（例如维基百科文章底部）中，非常适合使用列。没有人会逐个阅读它们，因此不存在可读性问题，但您确实希望脚注块紧凑且不占用太多页面高度。
好主意！感谢分享。
与砌体网格示例类似，我使用过 CSS 列来布局一整页的推荐语。完全响应式，并且我能够轻松地定义列以在块引用之间而不是在块引用内断开。显然，如果您有一堆长度差异很大的推荐语，那么在块引用内断开可能更可取。
列在 Prince 中很棒。在 Opera 仍然使用 Presto 时，他们还发布了一个更类似于打印的科技演示，与您在 EPUB 阅读器中看到的类似。
我曾经用它们来显示一个很长的复选框列表（复杂数据表的列选择器）。它们需要适合对话框。
哇... 开发网页多年，甚至都不知道 CSS 有
columns功能 - 而且它确实效果很好。还需要注意的是break-inside: avoid-column，它可以阻止浏览器跨列换行内容如果您在 Safari 中使用边距和填充来为 css 列中的项目设置间距，则它们不会正确对齐到顶部。我想到的唯一解决方法是在顶部添加一个空的 :before 或 :after 元素，并将其高度设置为间距。
我使用 CSS 列来很好地分配高度可变的块。
块的数量和内容未预先定义。与 flex 或 grid 相比，列可以提供更好的布局。
我使用
columns在网页上创建砌体效果，内容是关于我在网页开发中学习到的内容的简短笔记 - https://romanvesely.com/log。有点像推文，但排列更密集。我也喜欢它在宽屏上的显示效果。那是一个非常棒的页面，也是一个非常棒的记录笔记的方法！