Как использовать сетку-строки-выравнивание и сетки-колонки-выровнять?

Я экспериментирую с display: grid; и не понимаю, как работают grid-row-align и grid-column-align. в некоторых документах говорится, что (EDIT: эта ссылка теперь исчезла, вероятно, после того, как я опубликовал комментарий, указывающий на ответ Michael_B ниже)

Свойство grid-row-align определяет вертикальное выравнивание внутри строка while 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>
2 2
html css css3 grid-layout

2 ответа:

В текущем спецификация компоновки сетки CSS, нет таких свойств, как grid-row-align и grid-column-align. Они просто не существуют (см.индекс свойств ).

Эти свойства были частью настоящего момента. устаревшая спецификация сетки, который больше не реализуется в браузерах. IE10 / 11 и Edge могут по-прежнему поддерживать grid-row-align / grid-column-align, ноEdge в настоящее время находится в процессе обновления до текущей спецификации .

Для центрирования текста внутри a элемент сетки, просто используйте 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 может быть проще (и легче?) решение.

4

Официальная спецификация w3 для компоновки сетки не содержит записей для выравнивания по строкам сетки или выравнивания по столбцам сетки

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

То, что вы ищете,-это Flexbox(display:flex;) с опциями align-items: center; и justify-content:center; которые будут делать то же самое. Если вы хотите выровнять весь элемент сетки по центру, то вы можете использовать "align-items" и "justif-content" на сетке без модель Flexbox.

#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

1