最近在做大屏动态的layout,实现像下边的设计，数字表示一行几个：

设计稿只有一个特例，4的时候，一行2列，并且高度是50%，所以，要通过变量控制css的属性是 column-count : card.length === 4? 2:  card.length;以及子视图的高度 height : card.length === 4?  '50%':  '100%'

//容器
style={{column-count : card.length === 4? 2:  card.length;}}

//以及子视图的高度 
style={{height : card.length === 4?  '50%':  '100%'}}

在card 中具体填入自己的内容的过程中,遇到了card内容被分页的情况图一；以及由于相邻的card 存在margin值引起高度塌陷而造成card不对齐的问题

注：高度塌陷的问题解决办法是在subview 的样式中设置display : inline-block;

---

总之，用 column-count实现这种流布局的体验还是蛮好的。

ps:一般大屏的布局非常灵活，但分析了一下，也就是先分析外层layout的布局（找到规律），在慢慢实现内部的小组件的多种的design。还是蛮有趣的。