当一个网格项的宽度是自动的，并且grid-container的justify-items被设置为拉伸以外的其他选项时，如何确定它的宽度。

Question

我想知道，当网格项的宽度为 width: auto 和 justify-items 是一个非 stretch.

在下面的例子中，我注意到一些事情。

我看的是第一个网格项，颜色是红色的。

我看的是它的宽度。

当 justify-items: start|end|center...

似乎如果你添加30px的水平填充、边框或边距(pbm)，网格项的内容区域就会缩小，而项的内联尺寸(填充、边框、边距)则保持在其单元格内。

然而，当pbm为32px时，内容区域似乎停止了收缩，你可以看到项目的内联尺寸爬过了它的网格单元。为什么会这样？

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px;
  grid-column-gap: 20px;
  font-size: 19px;
  justify-items: start;
  width: 100%;
}

.grid-container> :nth-child(1) {
  background-color: red;
  height: 100px;
  padding: 20px;
}

.grid-container> :nth-child(2) {
  background-color: orchid;
}

.grid-container> :nth-child(3) {
  background-color: yellowgreen;
}

<div class="grid-container">
  <div>Lorem ipsum dolor sit amet consecteturadipisicing elit. t incidunt facilis rem doloribus. ng elit. t incidunt facilis rem doloribus.
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. t incidunt facilis rem doloribus.
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. t incidunt facilis rem doloribus.
  </div>
</div>

Answer 1

用 justify-items: stretch 网目 可以 缩小到适合自己的栏目。

从 规范:

负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： 负责人： stretch 关键字会导致元素收缩，以适应其容器。

---

请记住，每个列有200px的固定宽度。

.grid-container {
    grid-template-columns: 200px 200px 200px;
}

---

如果使用其他值 justify-items诸如 start 和 center根据内容、填充、边框和边距，网格项可以超过列宽。

在问题中第一列的情况下，问题的根源是一长串文字。

"consecteturadipisicing"

把它拆开，问题就迎刃而解了。

.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px;
  grid-column-gap: 20px;
  font-size: 19px;
  justify-items: start;
  width: 100%;
}

.grid-container> :nth-child(1) {
  background-color: red;
  height: 100px;
  padding: 20px;
}

.grid-container> :nth-child(2) {
  background-color: orchid;
}

.grid-container> :nth-child(3) {
  background-color: yellowgreen;
}

<div class="grid-container">
  <div>Lorem ipsum dolor sit amet con sec tetura dipi sicing elit. t incidunt facilis rem doloribus. ng elit. t incidunt facilis rem doloribus.
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. t incidunt facilis rem doloribus.
  </div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. t incidunt facilis rem doloribus.
  </div>
</div>