混个脸熟
这个布局专注从上到下从左到右放置子元素, 浏览器不支持时会自动降级到一列
.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