求助：如何用CSS和Sass搭建适配不同元素数量的网格系统

看起来你在搭建网格系统时遇到了列数控制和空间适配的问题，我帮你分析下当前代码的问题，然后给出改进方案：

问题分析 #

你当前的grid-template-columns: repeat(auto-fit, minmax(180px, 2fr))写法会让浏览器根据容器宽度自动调整列数，无法保证固定的4列布局；同时2fr的用法在这里不太合适，因为minmax的第二个参数是轨道的最大尺寸，结合auto-fit会导致列宽的计算不符合你想要的“均匀分布”需求。

改进方案 #

要实现固定4列、2行，元素均匀填充容器空间的效果，我们可以调整网格的行列定义：

修改后的CSS代码

* { 
  font-family: sans-serif; 
  font-size: 14px; 
  color: white; 
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 避免内边距/边框导致溢出 */
}
.container { 
  max-width: 800px; /* 用max-width替代固定width，提升响应式 */
  margin: 0 auto; 
}
.wrapper { 
  width: 100%; 
  margin: 20px 0; 
  display: grid; 
  grid-gap: 10px; 
  grid-template-columns: repeat(4, 1fr); /* 4列，每列平分可用空间 */
  grid-template-rows: repeat(2, fit-content(180px)); /* 2行，每行高度自适应，最大180px */
}
.item { 
  background-color: orangered; 
  height: 100px; 
  /* 移除width:100%，grid项默认会填充单元格 */
}

关键调整说明

• repeat(4, 1fr)：直接创建4个等宽列，每个列占据容器宽度的1/4，自动填充剩余空间，完美实现均匀分布。
• repeat(2, fit-content(180px))：固定2行，每行高度根据内容自动调整，最大不超过180px，符合你原本的需求。
• 添加box-sizing: border-box：避免元素的内边距或边框导致容器溢出，这是布局的通用最佳实践。
• 容器改用max-width：在小屏幕上容器会自动收缩，提升页面的响应式表现。

用Sass优化（更灵活可维护） #

如果你想用Sass让网格系统更易扩展，可以定义变量来控制行列数、间距等：

// 网格配置变量
$grid-columns: 4;
$grid-rows: 2;
$grid-gap: 10px;
$row-max-height: 180px;
$container-max-width: 800px;

* { 
  font-family: sans-serif; 
  font-size: 14px; 
  color: white; 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container { 
  max-width: $container-max-width;
  margin: 0 auto; 
}
.wrapper { 
  width: 100%; 
  margin: 20px 0; 
  display: grid; 
  gap: $grid-gap; /* Sass支持更简洁的gap属性替代grid-gap */
  grid-template-columns: repeat($grid-columns, 1fr);
  grid-template-rows: repeat($grid-rows, fit-content($row-max-height));
}
.item { 
  background-color: orangered; 
  height: 100px; 
}

可选：添加响应式适配 #

如果需要在小屏幕上自动切换为2列布局，只需添加媒体查询：

@media (max-width: 600px) {
  .wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

这样调整后，你的4×2网格就能完美实现元素均匀分布、行列自适应空间的效果了！

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