代码（scss）在这里做了3件事：为了不冗余，我把公共部分提取出来，命名为“.a-grid”；mixin支持4个参数，分别是$row（行数），$column（列数），$hasBorder（是否有边框），$isSquare（是否保证每个块都是正方形）。mixin内部计算组合：nth-??child达到“整体无外边框”的效果，.a-grid{display:flex;弹性包装：包装；宽度：100%；.a-grid__item{文本对齐：居中；职位：相对；>.item__content{显示：flex弹性流：列；-项目：中心；证明内容：居中；}}}@mixingrid($row:3,$column:3,$hasBorder:false,$isSquare:true){@extend.a-grid;.a-grid__item{flex-basis:100%/$column;@if($isSquare){底部填充：100%/$column；高度：0；}>.item__content{@if($isSquare){位置：绝对；上：0；左：0；右：0；下：0；}}}@for$index从1到(($row-1)*$column+1){.a-grid__item:nth-child(#{$index}){@if($hasBorder){border-bottom:1pxsolid#eee;}}}@for$index从1到$column{.a-grid__item:nth-child(#{$column}n+#{$index}){@if($hasBorder){border-right:1pxsolid#eee;}}}}使用//生成一个3行3列，正方形网格的网格。a-grid-3-3{@includegrid(3,3,true);}//生成一个2行5列的网格，无边框，每个网格的高度由内容决定。a-grid-2-5{@includegrid(2,5,false,false);}提醒：如果你想做一个nxm的布局，不要忘记在使用@includegrid(n,m)添加nxm对应的dom结构。最终的内容很简单，还有很多可以优化的地方。比如边框可以改成“发丝”边框，在真机上看起来更细。好吧，这就是所有的内容。如果有更好的实现方式，欢迎留言，感谢阅读。最近在写一个css样式库，目标是兼容小程序。有兴趣的可以一起玩。这是本课对应的源码：https://github.com/any86/5a.c...前端小伙伴进群，让我们一起学习成长！也可以加我微信，我拉你进微信群（由于腾讯微信群限制100人，超过100人我必须拉你进）