如何在 display:grid 中应用 grid-gap？答案

【问题标题】：How to apply grid-gap in display:grid?如何在 display:grid 中应用 grid-gap？
【发布时间】：2023-02-09 03:42:06
【问题描述】：

我将 grid-gap 应用于两个类中的每一个。但是，间隙区域显示但不是白色。文本位置位于每个单元格的顶部。我应该怎么办？

我将 grid-gap 应用于两个类中的每一个。但是，间隙区域出现，但是它不是白色的，而是 [#96ceb4]。我应该怎么办？

我应用了 text-align:center，但文本位置位于每个单元格的顶部。我想要文本位置位于每个单元格区域的中心。我应该怎么办？

body {
  padding: 50px
}

.container div {
  text-align: center;
  color: #fff;
  font-size: 1.5rem;
}

.container div:nth-child(1) {
  background: #96ceb4;
}

.container div:nth-child(2) {
  background: #ff6f69;
}

.container div:nth-child(3) {
  background: #88d8b0;
}

.container div:nth-child(4) {
  background: #ffcc5c;
}

.container div:nth-child(5) {
  background: #96ceb4;
}

.container div:nth-child(6) {
  background: #ff6f69;
}

.one {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 60px 100px;
  grid-gap: 10px;
}

.two {
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: 60px 100px;
  grid-gap: 10px;
}

<div class="container">
  <div class="one">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>

  <br>

  <div class="two">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

【问题讨论】：

当然它不是白色的——你通过.container div:nth-child(1)规则给了.one元素background: #96ceb4;。
感谢您的建议。但我是 html 的初学者。^^ 如果有人可以发布更正的代码，我将不胜感激。
总是等待固定代码的人，可能会停留初学者很久了。您已被告知问题所在 - 那么您为什么不现在就首先尝试自己修复它呢？

标签： html css

【解决方案1】：

改变背景颜色的间隙面积白色的, 添加以下内容CSS规则：

.container {
background-color: white;
}

到垂直居中文本在每个单元格中，添加以下内容CSS规则：

.container div {
display: flex;
align-items: center;
justify-content: center;
}

更新代码：

.container {
background-color: white;
}

 body{padding:50px}
.container div {text-align: center; color:#fff;font-size: 1.5rem;}
.container div:nth-child(1) {background: #96ceb4;}
.container div:nth-child(2) {background: #ff6f69;}
.container div:nth-child(3) {background: #88d8b0;}
.container div:nth-child(4) {background: #ffcc5c;}
.container div:nth-child(5) {background: #96ceb4;}
.container div:nth-child(6) {background: #ff6f69;}

.one {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 60px 100px;
  grid-gap:10px;
}


.two {
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: 60px 100px;
  grid-gap:10px;
}

.container div {
display: flex;
align-items: center;
justify-content: center;
}

To change the background color of the gap area to white, add the following CSS rule:

 <div class="container">
    <div class="one">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>

  <br>

    <div class="two">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </div>

【讨论】：