如何制作与预览图一致的SCSS网格布局？

先明确核心思路：不管用Grid还是Flex，先把布局参数用变量定义好，再根据布局规则实现，避免手动计算出错。以下是两种常用实现方式：

方法1：CSS Grid实现（推荐，无需手动计算） #

Grid语法可以直接定义列的宽度规则，自动处理间距和自适应，非常直观。假设你的布局是「左固定列 + 中间自适应列 + 右固定列」，示例代码：

// 定义布局变量，可根据实际需求修改
$left-col-width: 220px;
$right-col-width: 180px;
$col-gap: 24px;

.grid-container {
  display: grid;
  // 列规则：左固定宽度 + 中间占满剩余 + 右固定宽度
  grid-template-columns: $left-col-width 1fr $right-col-width;
  gap: $col-gap; // 列之间的间距
  width: 100%;
  max-width: 1400px; // 可选，限制容器最大宽度
  margin: 0 auto;
}

.grid-column {
  padding: 1.2rem;
  background-color: #f5f5f5;
}

如果第二、第三列是比例关系（比如第二列占2份，第三列占1份），只需要把grid-template-columns改成：

grid-template-columns: $left-col-width 2fr 1fr;

方法2：Flexbox实现（兼容旧浏览器，需手动计算时的逻辑） #

如果要兼容不支持Grid的环境，用Flex的话，自适应列的宽度可以通过calc()计算：

$left-col-width: 220px;
$right-col-width: 180px;
$col-gap: 24px;

.grid-container {
  display: flex;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.grid-col-left {
  width: $left-col-width;
  margin-right: $col-gap;
  padding: 1.2rem;
  background-color: #f5f5f5;
}

.grid-col-middle {
  // 计算自适应宽度：总宽度 - 左右固定列宽度 - 两侧间距
  width: calc(100% - #{$left-col-width + $right-col-width + $col-gap * 2});
  margin: 0 $col-gap;
  padding: 1.2rem;
  background-color: #f5f5f5;
}

.grid-col-right {
  width: $right-col-width;
  margin-left: $col-gap;
  padding: 1.2rem;
  background-color: #f5f5f5;
}

如果你的布局是其他规则（比如第二列固定、第三列自适应），只需要替换对应变量和计算逻辑即可，核心是用变量统一管理尺寸，避免硬编码导致计算错误。

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