使用CSS网格时如何添加背景色？

Question

当我添加以下代码时：

place-items: center;

仅文本的背景颜色在变化。

当我删除此代码时：

place-items: center;

整个列的颜色正在改变。

place-items: center;

place-items: center;

为什么会这样呢？

Answer 1

如果没有place-items: center;网格，则主题将被拉伸以覆盖所有区域，这就是背景将覆盖较大区域的原因：

与place-items: center;您的网格项将适合其内容，并将它们放置在中心；因此背景将仅覆盖文本。

为了避免这种情况，你可以居中内容在里面p，而不是居中的p。不要忘记也删除默认边距以覆盖更大的区域：

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px;
  grid-gap: 20px;
}

p {
  background-color: #eee;
  display: inline-grid;
  place-items: center;
  margin: 0;
}

<main>
  <p>box1</p>
  <p>box2</p>
  <p>box3</p>
  <p>box4</p>
</main>