Question

使用CSS-Grid，我尝试将我的项目放在网格单元格的中心，而不是将它们完全缩小到内容。这可能吗？

我在stackblitz上做了一个简单的例子。您可以看到那里的项目没有用背景颜色填充整个网格单元格。让它工作的正确方法是什么？我可以删除justify-items / align-items类，但内容不再是中心。

https://stackblitz.com/edit/angular-8bggtq?file=app/app.component.html

填充了单元格，但内容不在中心位置：

单元格未填充，但内容居中：

＆＃13;

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.item {
  //justify-self: stretch;
  //align-self: stretch;
}

.one {
  background: red;
}

.two {
  background: pink;
}

.three {
  background: violet;
}

.four {
  background: yellow;
}

.five {
  background: brown;
}

.six {
  background: green;
}

html,
body {
  margin: 0;
}

＆＃13;

<div class="wrapper">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
</div>

＆＃13;

Answer 1

网格容器的HTML结构具有三个级别：

容器
项（容器的子项）
内容（容器的孙子和物品的子孙）

你遇到的问题是你采用两级方法而不是正确的三级方法。当您在容器上设置align-items和justify-items时，它们会应用于网格项，不会应用于内容。

这正是您所看到的：网格项目正在垂直和水平居中。

如果要将网格项目居中子项（内容）居中，则需要在项目上指定。您可以在项目上重复您对容器所做的操作：

.item {
  display: grid;
  justify-items: center;
  align-items: center;
}

或者，如果您不需要项目中的网格布局，这是另一种简单的方法：

.item {
  display: flex;
  justify-content: center;
  align-items: center;
}

以上概念也适用于弹性容器。

有关更完整的说明和其他居中方法，请参阅此帖子：Centering in CSS Grid

.wrapper {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.one   { background: red;   }
.two   { background: pink;  }
.three { background: violet; }
.four  { background: yellow; }
.five  { background: brown; }
.six   { background: green; }
body   { margin: 0; }

<div class="wrapper">
  <div class="item one">1</div>
  <div class="item two">2</div>
  <div class="item three">3</div>
  <div class="item four">4</div>
  <div class="item five">5</div>
  <div class="item six">6</div>
</div>

Answer 2

我想说使用CSS网格的唯一方法是插入一个额外的元素/网格级别。

但是，我也会在这里说 - 正如 @Zuber 已经表明的那样 - 网格和flexbox之间的组合是达到你想要的最佳方式。

网格设计为与 flexbox一起使用，而不是

Ollie Williams: Things I’ve Learned About CSS Grid Layout

Pure Grid-example：

* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 20px; }

.wrapper {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.wrapper__item {
  display: grid;
  align-items: center;
  justify-items: center;
  background: gray;
  color: white;
  font-size: 2em;
}

<div class="wrapper">
  <div class="wrapper__item"><span>1</span></div>
  <div class="wrapper__item"><span>2</span></div>
  <div class="wrapper__item"><span>3</span></div>
  <div class="wrapper__item"><span>4</span></div>
  <div class="wrapper__item"><span>5</span></div>
  <div class="wrapper__item"><span>6</span></div>
</div>

Grid-＆amp; Flexbox的-例如：

* { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 20px; } .wrapper { height: 100vh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; grid-gap: 20px; } .wrapper__item { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: gray; color: white; font-size: 2em; }

<div class="wrapper"> <div class="wrapper__item">1</div> <div class="wrapper__item">2</div> <div class="wrapper__item">3</div> <div class="wrapper__item">4</div> <div class="wrapper__item">5</div> <div class="wrapper__item">6</div> </div>

Answer 3

你需要在课堂上添加一些css＆＃34; item＆＃34;

.item {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 4

如果只是文字，请尝试使用justify-self: center或text align:center。

CSS-Grid：如何在不缩小项目本身的情况下居中内容？

4 个答案: