Question

我正在试验display: grid;并且不了解grid-row-align和grid-column-align的工作原理。 Some documentation声明（编辑：此链接现已消失，可能是在我发布了评论指向Michael_B＆＃39>以下的答案之后）

grid-row-align属性定义其中的垂直对齐方式 grid-column-align时的行定义水平对齐在栏目内。

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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/

您正在寻找的是Flexbox（display：flex;），其中包含选项align-items：center;并证明 - 内容：中心;这也会做同样的事情。如果要将整个网格项对齐到中心，则可以在没有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;
}

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

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

2 个答案: