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

Question

我正在尝试 display: grid; 并且不明白 grid-row-align 和 grid-column-align 的工作原理。 Some documentation指出(编辑:此链接现已消失，可能是在我发布了一条指向下面 Michael_B 的答案的评论之后)

The grid-row-align property defines the vertical alignment within the row while grid-column-align defines the horizontal alignment within the column.

我的理解是，这是必须在受影响元素的容器中设置的属性(但我也尝试将其放入元素本身的规则中)。具体来说，我预计在下面的代码中，单词 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 可能是一个更简单(并且更轻？)的解决方案。