如何在React中用CSS Grid实现带间距的列优先网格布局？

你的问题在于当前仅为列容器（.board）设置了间距，但列内部的单元格没有配置垂直方向的间距。无需给.cell添加margin，只需调整.column的布局即可实现单元格间的间距且不影响边缘。

修改方案 #

给.column类添加布局样式，通过gap属性控制列内单元格的垂直间距：

.column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

或者使用Grid布局也能达到同样效果：

.column {
  display: grid;
  gap: 20px;
}

完整修改后的CSS代码 #

.App {
  font-family: sans-serif;
  text-align: center;
}

.cell {
  width: 20px;
  height: 20px;
  background-color: bisque;
}

.board {
  display: grid;
  grid-template-columns: repeat(7, 0fr);
  gap: 20px;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

原理说明 #

• .board的gap属性控制的是列与列之间的水平间距（因为.board的子元素是.column）。
• .column新增的gap属性控制的是同一列内单元格之间的垂直间距，gap只会在子元素之间生成间距，不会在容器的上下边缘产生额外空白，完美符合你"仅单元格之间有间距"的需求。

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