html - 当网格项的宽度为自动且网格容器的对齐项设置为拉伸以外的其他内容时，如何确定网格项的宽度

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>

标签： htmlcsscss-grid

Answer 1

使用justify-items: stretch网格项目可以缩小以适应它们的列。

从规格：

stretch关键字可以导致元素缩小，以适应它们的容器。

---

请记住，每列的固定宽度为 200 像素。

.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>