混个脸熟

这个布局专注从上到下从左到右放置子元素, 浏览器不支持时会自动降级到一列

.container {
  column-count: 3; /* 简单的实现三列布局 */
}

真实应用案例: https://codepen.io/spark/ (codepen 每周优秀项目)

类Pinterest 图片流, 从上到下从左到右的排列顺序

https://codepen.io/dudleystorey/pen/yqrhw

https://codepen.io/dicson/pen/rWMmVp

Columns 里面嵌入Grid, 可以把一列Grid 布局分为多列 XD

https://codepen.io/captainbrosset/pen/RxBELP

响应式文章, 大屏用多列显式文章内容

https://codepen.io/designcourse/pen/oNvdZgv

https://css-tricks.com/guide-responsive-friendly-css-columns/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns