CSS Grid如何设置grid-column起止值让两个盒子各占网格宽度一半

要实现你要的布局效果，只需要调整网格的列划分规则和对应单元格的跨列配置即可，修改方案如下：

核心修改逻辑 #

1. 将原5列网格调整为10列网格，每2个新列对应原1个列的宽度，既不改变原有其他单元格的布局比例，也方便对半划分总宽度
2. 原有其他单元格都设置为跨2个新列，保持和原布局完全一致
3. 8号、9号单元格各跨5个新列，刚好各占总宽度的一半，接缝恰好位于3号单元格的正下方

修改后的完整CSS代码 #

.container {
  height: 90vh;
  margin: 2rem;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 3px;
}

.cell {
  color: white;
  font-size: 3rem;
  text-align: center;
  padding: 4rem;
}

.cell-1 {
  background: deepskyblue;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column: span 2;
}

.cell-2 {
  background: orange;
  grid-column: span 2;
}

.cell-3 {
  background: royalblue;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column: span 2;
}

.cell-4 {
  background: gold;
  grid-column: span 2;
}

.cell-5 {
  background: blueviolet;
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column: span 2;
}

.cell-6 {
  background: limegreen;
  grid-column: span 2;
}

.cell-7 {
  background: coral;
  grid-column: span 2;
}

.cell-8 {
  background: lightseagreen;
  grid-row-start: 3;
  grid-column: span 5;
}

.cell-9 {
  background: maroon;
  grid-row-start: 3;
  grid-column: span 5;
}

.cell-10 {
  background: mediumaquamarine;
}

React和HTML代码不需要做任何改动即可生效。

内容的提问来源于stack exchange，提问作者The silent one