css column

CSS列布局（CSS columns）是一种新的布局方式，它可以将文本和其他内容分成多列。列布局最常用于报纸和杂志的排版中，但在Web设计中也变得越来越常见。

在CSS3中，我们可以使用column属性来定义列数、列宽、列间距和分列方式。

    /* 定义3列，每列宽度为33.33% */
    div {
        column-count: 3;
        column-width: 33.33%;
    }

我们还可以使用column-gap属性来定义列之间的间距：

    /* 定义3列，间距为20px */
    div {
        column-count: 3;
        column-width: 33.33%;
        column-gap: 20px;
    }

还可以使用column-rule属性来定义列之间的分隔线：

    /* 定义3列，间距为20px，分隔线为2px实线，蓝色 */
    div {
        column-count: 3;
        column-width: 33.33%;
        column-gap: 20px;
        column-rule: 2px solid blue;
    }

对于长文本，我们还可以使用break-inside属性来定义内容在列之间如何分布，可选的属性值有auto、avoid、always和all。

使用CSS列布局可以让长篇文章的阅读更加流畅，同时也可以为页面带来新的设计方式。但需要注意的是，不是所有浏览器都支持CSS列布局，需要做好浏览器兼容性处理。