如何让CSS Grid元素尺寸均等？Sass网格布局问题求助

首先得帮你理清核心问题：16是4的平方（4×4），所以刚好能填满一个正方形容器，每个小单元格的宽高自然相等；但40不是完全平方数，没有两个相等的整数相乘等于40（最接近的是7×7=49，6×6=36），这就导致如果直接按默认的Grid排列，容器的正方形比例和单元格的行列数比例不匹配，最终出现右侧单元格被压缩的情况。

下面给你两种可行的解决方案，根据你的需求选择：

方案一：保持容器为严格正方形，允许少量空白位 #

这种方案是用一个能容纳40个元素的最小正方形网格（7列×7行，共49个位置），每个单元格都是标准正方形，剩下的9个位置留空。

Sass代码示例： #

$item-count: 40;
$grid-size: 7; // 7×7=49，足够容纳40个元素

.grid-container {
  width: 100vmin; // 用vmin确保容器始终是正方形，适配不同屏幕
  height: 100vmin;
  display: grid;
  grid-template-columns: repeat($grid-size, 1fr);
  grid-template-rows: repeat($grid-size, 1fr);
  gap: 0; // 如果需要间隙，可改为比如2px，同时调整单元格尺寸，比如calc((100% - #{$grid-size - 1}*2px)/#{$grid-size})
}

.grid-item {
  aspect-ratio: 1; // 强制单元格为正方形
  // 你的其他样式，比如背景色、边框等
  background: #ddd;
  border: 1px solid #fff;
}

方案二：排列成近似正方形的矩形（无空白位） #

如果你不想留空白，可以把容器做成8列×5行的矩形（8×5=40），这个矩形的宽高比是8:5，接近正方形，同时每个单元格都是标准正方形。如果一定要让整体看起来是正方形，可以给容器加一个正方形的外框，内部网格居中显示。

Sass代码示例： #

$cols: 8;
$rows: 5;
$item-count: $cols * $rows;

// 外层正方形容器
.square-wrapper {
  width: 100vmin;
  height: 100vmin;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #000; // 可选的正方形外框
}

// 内部网格
.grid-container {
  width: calc(100vmin * #{$cols / max($cols, $rows)}); // 按比例计算网格宽度
  height: calc(100vmin * #{$rows / max($cols, $rows)});
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  grid-template-rows: repeat($rows, 1fr);
  gap: 0;
}

.grid-item {
  aspect-ratio: 1;
  background: #ddd;
  border: 1px solid #fff;
}

关键注意点 #

• 一定要给单元格加上aspect-ratio: 1，强制保持正方形，避免Grid自动调整宽高破坏比例。
• 如果需要添加间隙（gap），要确保间隙的总宽度/高度被纳入单元格尺寸的计算，比如用calc()来调整单元格的基础尺寸，避免容器溢出或单元格变形。

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