如何在两个相邻的CSS Grid之间添加垂直空白间隙？

现有代码 #

HTML

<div class="my_grid_react"></div>
<div class="my_grid_python"></div>

CSS

.my_grid_react {
  display: grid;
  float: left;
  grid-template-columns: repeat(1, auto);
  background-color: lightgreen;
  width: 50%;
}

.my_grid_react div {
  background-color: yellow;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}

.my_grid_python {
  display: grid;
  grid-template-columns: repeat(1, auto);
  background-color: orange;
  width: 50%;
}

.my_grid_python div {
  background-color: aqua;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}

JavaScript

//grid 1 details
const JSONOfReactUrls =
  '{"https://create-react-app.dev/docs/getting-started":"React Start",\
    "https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea":"React training",\
    "https://www.digitalocean.com/community/tutorials":"Digital Ocean Tutorials",\
    "https://www.joshwcomeau.com/react/common-beginner-mistakes/":"React Beginner mistakes"\
    }';

let obj = JSON.parse(JSONOfReactUrls);

for (let key in obj) {
  elem = document.createElement('div');
  elem.setAttribute('id', obj[key]);
  elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
  document.querySelector('.my_grid_react').append(elem);
}

//grid 2 details
const JSONOfPythonUrls =
  '{"https://docs.python.org/3/library/stdtypes.html#dict":"Python dictionary",\
"https://docs.python.org/3/library/stdtypes.html#typesseq-common":"Python Sequence",\
"https://docs.python.org/3/reference/expressions.html#comparisons":"Python expressions",\
"https://pythontutor.com/visualize.html#mode=edit":"Python visualiser",\
"https://towardsdatascience.com/unpacking-operators-in-python-306ae44cd480":"Unpacking operator"\
    }';

obj = JSON.parse(JSONOfPythonUrls);

for (let key in obj) {
  elem = document.createElement('div');
  elem.setAttribute('id', obj[key]);
  elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
  document.querySelector('.my_grid_python').append(elem);
}

问题 #

我创建了两个CSS Grid，使用float属性使其相邻排列；现希望在背景色为lightgreen的Grid与背景色为orange的Grid之间添加5px的垂直白色间隙，请给出实现方法。

实现方法 #

这里提供两种简单可行的方案：

方案一：调整宽度+右侧外边距

直接修改两个Grid的宽度，给左侧Grid添加右侧外边距，留出5px的白色间隙：

.my_grid_react {
  display: grid;
  float: left;
  grid-template-columns: repeat(1, auto);
  background-color: lightgreen;
  width: calc(50% - 2.5px); /* 均分剩余宽度，避免超出容器 */
  margin-right: 5px; /* 右侧留出5px白色间隙 */
}

.my_grid_python {
  display: grid;
  grid-template-columns: repeat(1, auto);
  background-color: orange;
  width: calc(50% - 2.5px); /* 均分剩余宽度 */
}

方案二：父容器配合内边距

给两个Grid套一个父容器，利用父容器的白色背景露出间隙：

1. 修改HTML结构：

<div class="grid-wrap">
  <div class="my_grid_react"></div>
  <div class="my_grid_python"></div>
</div>

2. 添加并修改CSS：

.grid-wrap {
  background-color: white;
  overflow: hidden; /* 清除浮动影响 */
  padding: 0 2.5px; /* 左右各留2.5px，总间隙5px */
}

.my_grid_react {
  display: grid;
  float: left;
  grid-template-columns: repeat(1, auto);
  background-color: lightgreen;
  width: 50%;
}

.my_grid_python {
  display: grid;
  grid-template-columns: repeat(1, auto);
  background-color: orange;
  width: 50%;
}

两种方案都能实现需求，方案一改动更小，适合快速调整。

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