在 CSS 中，columns 和 column-count 是用于创建多列布局的属性。它们主要用于将文本或其他内容分成多个列，以实现类似报纸或杂志的布局效果。下面是对这两个属性的详细解释：

column-count 属性

• 功能：指定元素内容应该分成多少列。

• 语法：column-count: number;

• 值：

  • number：一个整数，表示希望创建的列数。

  • auto：浏览器会根据其他相关属性自动确定列数。

示例：

.container {
  column-count: 3;
}

在这个例子中，.container 内的内容将被分为三列。

columns 简写属性

• 功能：允许同时设置 column-width 和 column-count。

• 语法：columns: column-width column-count;

• 值：

  • column-width：期望的列宽。

  • column-count：期望的列数。

示例：

.container {
  columns: 200px 3;
}

在这个例子中，.container 的内容将被分为最多三列，每列的最小宽度为 200 像素。注意，实际的列数可能会因为容器的实际宽度而有所调整。

其他相关属性

• column-width：指定列的宽度。浏览器会根据这个宽度和容器的宽度来计算列数。

.container {
  column-width: 200px;
}

• column-gap：定义列与列之间的间距。

.container {
  column-gap: 20px;
}

• column-rule：设置列与列之间的分隔线。

.container {
  column-rule: 1px solid #ccc;
}

通过这些属性，你可以灵活地创建和控制多列布局，以适应不同的设计需求。

可以达到的效果