一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第N天，点击查看活动详情。
都四月份了，我还在面试，真的觉得别人是金三银四，我的是铜三铁四。这次面试的字节，给我印象深刻的是一道CSS题目，让我知道了原来自己的CSS漏的和大水缸一样。
题目描述
如图要实现一个这样无限长度的列表布局如何实现。
我的方案
方案一
一看到这一题，一时间就有挺多种方案的，首先我可以给里面的每个盒子设置一个margin-left为24px,这时候就只有第一个盒子不满足要求，那么我们只要给父盒子增设一个padding-right为7px就可以了，这样一道CSS题硬生生给我做成了数学计算哈哈哈。这个答案面试官肯定是不满意的，于是我开始思考另一种办法。
方案二
我在想既然你是一个无限长的列表，那么你肯定是要用循环渲染出来的，那么只要我拿到每个子盒子的下标，利用下标取模3等于0来获得每一个打头的子元素，再利用CSS样式重叠的性质，重新设置他的margin值，这样就可以解决这个问题了。面试官说这里不想用到js单纯CSS的方法有没有，那我只能继续思考。
方案三
通过上面两种方案其实我们可以发现这个题目的难点就是打头的这个元素它要进行特殊的处理，那么我就想到了伪类中的first-child,我只要以三个元素为一组，然后给每一组设置一个伪类first-child单独设置它的样式，那么也可以很好的解决，这个方法其实我一开始就有想到，考虑到分组的过程中，每一组多了一层结构，所以没有把它作为心中的答案。确实这样不是面试官心中的答案。
方案四
既然上面的都不对，那么我开始想到这会不会是考我的瀑布布局，我们利用muti-column这个属性可以进行操作
思路：
父盒子：
Column-count：设置展示的列数
Column-gap :设置列之间的间隔
子盒子：
Break-inside: avoid 防止断裂
