使用columns实现单行多列布局

使用columns实现单行多列布局是非常方便的，代码如下.

css代码：

.container {
    columns: 3;
    gap: 10px;
}
.container > div {
    background-color: red;
}

html代码：

<div class="container">
    <div>
        left
    </div>
    <div>
        main
    </div>
    <div>
        right
    </div>
</div>

只需要cloumns、gap两个属性就可以了，是不是非常方便；

效果如下：

不需要像flex那样修改display，改变元素本身的display值。