Question

当我添加此代码时：

place-items: center;

只有文字的背景颜色正在改变。

当我删除此代码时：

place-items: center;

整栏的颜色正在发生变化。

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 100px;
  grid-gap: 20px;
  place-items: center;
}

p {
  background-color: #eee;
}

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

为什么会这样？

Answer 1

如果没有place-items: center;你的网格主题，它就会被覆盖所有区域，这就是为什么背景覆盖了一个很大的区域：

使用place-items: center;您的网格项目将适合其内容，它们将被放置在中心;因此背景将仅涵盖文本。

为避免这种情况，您可以将{strong>内容置于p内，而不是将p居中。不要忘记删除默认保证金以覆盖更大的区域：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

如何在使用css网格时添加背景颜色？

1 个答案: