纯CSS实现从上到下从左到右的列表布局方式

1. 一、grid 布局
2. 二、grid 布局的小问题
3. 三、columns 布局
4. 四、总结

正常情况下，网页中的列表都是从左到右、从上到下的。

还可以通过column-gap来设置分栏的间隔：

.list{
  /**/
  column-gap: 8px; /* 分栏间隔 */
}

这样就实现了我们想要的效果了，而且不论数量多少，都能自动等分。

是不是非常简单呢？你可以访问以下链接查看真实效果。

四、总结

一个非常实用的布局小技巧，你学到了吗？下面总结一下：

1. 正常网页中的列表都是从左到右，从上到下的，但有时候也会碰到从上到下，从左到右的
2. grid布局可以实现m*n的网格布局
3. grid布局可以通过grid-auto-flow，改变网格的排列方式
4. grid布局无法自动改变纵向的数量，让整个表格尽可能等分，需要借助一点点JS
5. columns 布局可以直接实现从上到下，从左到右的布局