添加的网格间隙导致行项目溢出网格容器，但不是列项目[重复]答案

【问题标题】：Grid gap being added causes row items to overflow grid container but not column items [duplicate]添加的网格间隙导致行项目溢出网格容器，但不是列项目[重复]
【发布时间】：2021-08-09 00:07:56
【问题描述】：

我遇到了一个网格布局示例，但不明白为什么向行和列添加网格间隙会导致行项溢出容器（我理解）而不是列项；而是容器扩展而没有溢出。

body {
  padding: 20px;
}

.grid-container {
  border: 5px solid black;
  font-family: avenir, sans-serif;
  font-weight: bold;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: 100px 100px;
  gap: 20px;
}

.grid-item {
  padding: 10px 20px;
}

.grid-item:nth-child(1) {
  background: darkcyan;
}

.grid-item:nth-child(2) {
  background: turquoise;
}

.grid-item:nth-child(3) {
  background: aquamarine;
}

.grid-item:nth-child(4) {
  background: lightgreen;
}

.grid-item:nth-child(5) {
  background: mediumseagreen;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

【问题讨论】：

标签： css css-grid

【解决方案1】：

您应该使用fr 单位在grid-template-columns: repeat(4, 1fr); 中进行这种使用

1fr 代表可用空间的 1 分之一

body {
  padding: 20px;
}

.grid-container {
  border: 5px solid black;
  font-family: avenir, sans-serif;
  font-weight: bold;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px 100px;
  grid-gap: 20px;
}

.grid-item {
  padding: 10px 20px;
}

.grid-item:nth-child(1) {
  background: darkcyan;
}

.grid-item:nth-child(2) {
  background: turquoise;
}

.grid-item:nth-child(3) {
  background: aquamarine;
}

.grid-item:nth-child(4) {
  background: lightgreen;
}

.grid-item:nth-child(5) {
  background: mediumseagreen;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

【讨论】：

是的，我明白了。但是为什么会出现行而不是列的溢出呢？
是的，假设您的网格宽度为 200 像素，您每列占用 25%，因此每个图块为 50 像素，但加上您的 20px，您的 60px 就会溢出
我意识到这个问题需要重新说明。横轴（Y 轴）没有溢出其容器。增加行间距会使容器扩展以容纳额外的空间，但仅在横轴上。