Html 如何制作破碎/波浪形网格

我曾尝试过使用底边为负、顶边为正的flexbox，但flexbox的孩子们比看起来更难设计

有没有更好的方法来达到这个效果？
Flexbox是这里的必经之路吗

我如何用一个好的现代解决方案来实现这一点？
你会如何处理这个问题

。断开的网格{
显示器：flex；
证明内容：中心；
利润率：0-30px-30px；
}
.断开的网格项目{
显示器：flex；
弯曲方向：立柱；
边缘底部：30px；
左侧填充：30px；
}
.视觉{
宽度：25vw；
身高：100%；
边缘底部：30px；
}
.视觉：第n个子项（4n+2）{
边缘底部：-50px；
边缘顶部：100px；
}
.视觉：第n个子项（4n+3）{
利润上限：-50px；
边缘底部：100px；
}

---

在本例中，我使用了常规css

Flexible与子元素一样，通过继承使用显示-

显示：继承

。我对间隔使用了

gap

规则-

gap:15px

为了用图像定义偶数/奇数块，我使用了带有偶数属性和奇数属性的

：nth-child（）

伪类

正文{
高度：100vh；
保证金：0；
}
.破格{
显示器：flex；
证明内容：中心；
对齐项目：居中；
间隙：15px；
宽度：100%；
身高：100%；
}
.断开的网格项目{
显示：继承；
弯曲方向：立柱；
差距：继承；
弹性：25%；
}
.视觉图像{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.断格项目：第n个子项（奇数）{
边缘顶部：50px；
}
.Break-grid_uu项目：第n个子项（偶数）{
边缘底部：50px；
}

这是否回答了您的问题？我不确定我要找的是不是砖石网格，你建议用空的子对象来填充网格项上下的空白区域吗？