如何使用网格行对齐和网格列对齐？

Question

我正在试验display: grid;，但不明白grid-row-align 和grid-column-align 是如何工作的。 Some documentation 声明（编辑：这个链接现在已经消失了，可能是在我发布了指向下面 Michael_B 答案的评论之后）

grid-row-align 属性定义了垂直对齐方式 grid-column-align 定义水平对齐的行 列内。

我的理解是，这是一个必须在受影响元素的容器中设置的属性（但我也尝试将它放在元素本身的规则中）。具体来说，我希望在下面的代码中，单词hello 将在他的框中水平和垂直居中。

这些属性的正确用法是什么？

注意：我使用的是 Chrome 58，根据兼容性矩阵是可以的。

#container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  height: 300px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
  grid-row-align: center;
  grid-column-align: center;
}
#box-1 {
  grid-column: 1;
  grid-row: 1;
  border-style: solid;
  border-width: 1px;
  /* I also tried to put them here
  grid-row-align: center;
  grid-column-align: center;
  */
}
#box-2 {
  grid-column: 1;
  grid-row: 2;
  border-style: solid;
  border-width: 1px;
}

<div id="container">
  <div id="box-1">
    hello
  </div>
  <div id="box-2">
    world
  </div>
</div>

Answer 1

在当前的CSS Grid Layout specification中，没有grid-row-align和grid-column-align这样的属性。它们根本不存在（参见Property Index）。

这些属性是现在 obsolete Grid spec 的一部分，它不再在浏览器中实现。 IE10/11 和 Edge 可能仍支持grid-row-align / grid-column-align，但Edge is currently in the process of upgrading to the current spec。

要在网格项中居中文本，只需使用 flexbox：

#container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  height: 300px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
}

#box-1 {
  grid-column: 1;
  grid-row: 1;
  border-style: solid;
  border-width: 1px;

  /* NEW */
  display: flex;
  justify-content: center;
  align-items: center;
}

#box-2 {
  grid-column: 1;
  grid-row: 2;
  border-style: solid;
  border-width: 1px;

  /* NEW */
  display: flex;
  justify-content: center;
  align-items: center;
}

<div id="container">
  <div id="box-1">hello</div>
  <div id="box-2">world</div>
</div>

请记住，容器上的对齐属性将应用于网格项，但不适用于网格项的内容，这是另一个级别。

因此，如果您给容器justify-items: center 和align-items: center，则整个项目将在容器中居中，这不是您想要的。

#container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  height: 300px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
  justify-items: center; /* new */
  align-items: center;   /* new */
}

#box-1 {
  grid-column: 1;
  grid-row: 1;
  border-style: solid;
  border-width: 1px;
}

#box-2 {
  grid-column: 1;
  grid-row: 2;
  border-style: solid;
  border-width: 1px;
}

<div id="container">
  <div id="box-1">hello</div>
  <div id="box-2">world</div>
</div>

因此，您需要将网格项设为嵌套容器，以便将对齐属性应用于内容。您可以给项目display: grid 并使用justify-items 和align-items，就像上面的例子一样。但是，如果您不需要在网格项中添加新网格，则 flex 可能是一种更简单（更轻巧？）的解决方案。

Answer 2

官方的 w3 网格布局规范没有 grid-row-align 或 grid-column-align 条目

https://www.w3.org/TR/css3-grid-layout/

您正在寻找的是带有选项 align-items: center; 的 Flexbox(display:flex;)并证明内容：中心；这将做同样的事情。如果你想将整个网格项目对齐到中心，那么你可以在没有弹性框的网格上使用“align-items”和“justif-content”。

#container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  height: 300px;
  width: 300px;
  border-style: solid;
  border-width: 1px;
  align-items: center;
  justify-content: center;
}

codepen https://codepen.io/srajagop/pen/rmbvYV