如何在CSS Grid中让列水平均匀分布，兼具均等内外间距？

要实现蓝色、绿色列水平分布且两侧与中间间距均等，只需修改Grid容器的布局属性，两种可行方案如下：

方案一：使用justify-content: space-evenly（推荐） #

这是最直接的实现方式，space-evenly属性会自动让列与容器左右边缘、列与列之间的间距完全相等：

.cols{
  width: calc(100% - 30px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 140px; /* 保留你需要的固定列宽 */
  justify-content: space-evenly; /* 核心属性，实现均等间距 */
  background: lightblue;
  height: 90vh;
}

.cola{background: blue;}
.colb{background: green;}

HTML无需修改：

<div class='cols'>
  <div class='cola'></div>
  <div class='colb'></div>
</div>

方案二：用fr单位模拟（兼容旧场景） #

如果需要兼容不支持space-evenly的旧浏览器，可以通过在固定列前后添加空白列的方式，用1fr均分剩余空间，确保左、中、右三个空白区域宽度一致：

.cols{
  width: calc(100% - 30px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px 1fr 140px 1fr;
  grid-template-areas: ". cola . colb .";
  background: lightblue;
  height: 90vh;
}

.cola{
  background: blue;
  grid-area: cola;
}
.colb{
  background: green;
  grid-area: colb;
}

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