如何用CSS让行列不均的Grid容器单元格变为正方形？

要让Grid单元格变成正方形并消除行间隙，你需要调整Grid容器的样式，确保每行高度与每列宽度匹配，具体修改如下：

修改Grid容器样式 #

将原容器样式替换为：

width: 100%;
aspect-ratio: 1; /* 让容器保持正方形，保证行列比例协调 */
display: grid;
grid-template-columns: repeat(8, 1fr); /* 8列均等分容器宽度 */
grid-auto-rows: 1fr; /* 每行高度自动匹配列宽，实现单元格正方形 */

关键修改说明 #

• 把grid-template-columns: repeat(8, auto)改成repeat(8, 1fr)：让每列宽度均等分配容器可用宽度，避免列宽由内容决定导致的尺寸混乱。
• 添加grid-auto-rows: 1fr：让每行高度自动等于列宽，确保每个单元格宽高比为1:1，也就是正方形。
• 用width: 100%和aspect-ratio: 1替代原height:95%：避免强制设置高度导致行高被拉伸或压缩，保证容器本身比例协调。

子元素样式无需修改 #

你原来的子元素样式可以保留，width:100%和aspect-ratio:1会让子元素自动填满正方形的Grid单元格，彻底消除行间隙。

内容的提问来源于stack exchange，提问作者Riccardo Perego