如何使用grid-row-align和grid-column-align？

Question

我正在试验 display: grid;，不明白 grid-row-align 和 grid-column-align 是如何工作的。 Some documentation 声明（编辑：这个 link 现在不见了，可能是在我发表评论指向下面 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 在他的框中水平和垂直居中。

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

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

#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

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

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

您正在寻找的是带有选项 align-items: center; 的 Flexbox(display:flex;)并证明内容：中心；这将做同样的事情。如果你想将整个网格项目对齐到中心，那么你可以在没有 flexbox 的网格上使用 "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;
}

代码笔 https://codepen.io/srajagop/pen/rmbvYV

Answer 2

当前CSS Grid Layout specification, there are no such properties as grid-row-align and grid-column-align. They simply don't exist (see Property Index).

这些属性现在是 obsolete Grid spec, which is no longer being implemented in browsers. IE10/11 and Edge may still support grid-row-align / grid-column-align, but 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 可能是一种更简单（更轻便？）的解决方案。

如何使用grid-row-align和grid-column-align？

How to use grid-row-align and grid-column-align?

html

css

grid-layout

css-grid