什么是CSS列？
在W3School的定义中，CSS列是对一块文本进行水平或垂直细分的布局元素。CSS列布局可以用于创建各种页面布局，包括新闻文章，博客网站，电子商务门户等等。CSS列中有几个重要的参数需要掌握，包括列宽（width）、列数（column-count）、间隔（column-gap）等等。
如何创建CSS列？
我们可以使用CSS3中引进的多列布局属性来创建CSS列。我们可以使用column-count参数来设置页面中要排列成多少列。下面是一个例子：
div {
width: 80%;
margin: auto;
column-count: 3;
column-gap: 2em;
}
在上面的例子中，我们设置了一个div元素，它占据了页面总宽度的80%。我们将div元素排列成3列，使用column-count: 3，设置列与列之间的距离为2em，使用column-gap: 2em。
如何填充CSS列？
在创建CSS列之后，我们还需要将文本与其他元素填充到这些列中。以下是一些方法。
方法1：使用column-break-inside参数
我们可以使用column-break-inside属性来设置元素在列之间如何分布。默认情况下，元素会按照它们在HTML文档中的位置跨越多个列。但是，我们可以使用column-break-inside: avoid来避免元素跨越多个列。这可以很好地控制文本和其他元素的位置。以下是一个例子：
p {
column-break-inside: avoid;
}
在上面的例子中，我们使用column-break-inside: avoid来避免段落跨越多个列。
方法2：使用widows和orphans参数
我们可以使用widows和orphans参数来控制元素的分布方式。这些参数可以用于设置在哪个阈值下将元素分割成列，以及在元素分割时保持几行在列的底部或者顶部。下面是一个例子：
p {
widows: 3;
orphans: 2;
}
在上面的例子中，我们设置元素分割时保留3行在底部或顶部，保留2行在顶部或底部。
方法3：使用column-span参数
我们可以使用column-span属性来将一个元素跨越多列。以下是一个例子：
div {
column-span: 2;
}
在上面的例子中，我们将一个div元素跨越两列。
总结
CSS列提供了一种方便的方法来创建页面布局。我们可以使用column-count、column-gap等参数来创建列，并使用column-break-inside、widows、orphans、column-span等参数来填充列。创建并掌握CSS列布局可以帮助我们更加灵活和有效地设计和布置网页。