最近购买了豆包的付费功能，写代码果然效率高很多。也不知道是不是付费的模型比较聪明，提供的解决方案正确率挺高的，用起来总体很丝滑流畅。唯一的不足是，很多错误需要我自己再次提出来，然后豆包才去检索代码来修复，而不是在提供代码的时候就给我这个最好的代码，这说明他在这个协助的过程也是在成长的。
先来看本站侧栏读者墙的样式
- #sidebar .reader-wall-list {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- justify-items: center;
- grid-row-gap: 12px;
- list-style: none;
- margin: 0;
- padding: 12px 5px;
- }
逐条解析属性
display: grid开启网格布局，把子元素（每个头像 li）变成网格项目。
对比 flex：flex 默认一行排满自动换行需要 flex-wrap:wrap；grid 可以直接定义每一行固定几列，非常适合头像墙、图片画廊。
grid-template-columns: repeat(5, 1fr);repeat(5,1fr)= 创建5 列，每列宽度等分。
1fr：网格剩余空间按份数分配，5 个 1fr，代表 5 列均分容器宽度。- 效果：一行强制放 5 个头像，超出的元素自动流到下一行。截图第一行 5 个，第二行5 个，完全符合这个规则。
justify-items: center;网格单元格内部，水平居中子元素。每个头像在自己格子里面居中，头像大小小于格子的时候，不会靠左贴边。
💡区分容易混淆的两个属性：
justify-items：单元格内部子项水平对齐（当前用的这个）justify-content：当网格总宽度小于容器时，控制整个网格轨道在容器中的对齐。
grid-row-gap:12px行间距，两行头像之间的垂直距离。
旧写法
grid-row-gap，新标准简写row-gap:12px；同理column-gap控制列间距。
当前代码没有设置column-gap，列之间空隙由1fr均分自动产生。
-
list‑style:none; margin:0清除 ul 默认列表圆点、浏览器默认外边距。
-
padding:12px 5px模块内边距：上下 12px，左右 5px，防止头像贴容器边框。
✨这个方案的优点
- 固定每行 5 个，不用算宽度百分比，
repeat(5,1fr)直接搞定；元素自动换行，第二行剩余 2 个元素自动排列。 justify-items:center，头像在格子居中，头像尺寸不一致也不会排版错乱。- 代码简洁，对比 flex 方案少写很多逻辑。
PS：即使最好的方案是全表格化，但阿三已经用其它方法调好了样式，先这样用着吧，以后有机会再写表格的 CSS 样式时，一定写个完美的，却也要借助豆包的智慧地说。笔记就写到这...
- 版权声明：本站原创文章，于2026年8月20日，由 幕后者 发表，共 1189 字。
- 转载请注明：从侧栏读者墙学习表格css _ Begin Studio
