Центрирование в CSS Grid

Одной из распространенных проблем, с которой сталкиваются начинающие разработчики, является центрирование текста в ячейках сетки CSS Grid. Допустим, есть простая веб-страница, разделенная на две части с помощью CSS Grid. Задача — центрировать текст в каждой из этих областей.

Во многих случаях начинающие разработчики используют CSS свойство justify-self: center; для центрирования текста. Однако это не всегда работает, как ожидается. Проблема в том, что justify-self: center; центрирует содержимое только по горизонтали. Если нужно центрировать текст и по вертикали, необходимо использовать дополнительные свойства.

Решение этой проблемы может быть следующим. Во-первых, вместо использования display: subgrid; для ячеек сетки, можно использовать display: grid;. display: grid; позволяет применить свойства CSS Grid к содержимому ячейки.

Теперь можно центрировать текст в ячейке с помощью свойств justify-content и align-content, которые центрируют содержимое ячейки по горизонтали и вертикали соответственно. Пример CSS кода для левой ячейки может выглядеть следующим образом:

.left_bg {
  display: grid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  justify-content: center;
  align-content: center;
}

Также необходимо убедиться, что текст помещен в ячейку сетки. Правильная структура HTML может выглядеть следующим образом:

<div class="container">
  <div class="left_bg">
    <p class="left_text">Review my stuff</p>
  </div>
</div>

Теперь текст будет центрирован как по горизонтали, так и по вертикали в каждой ячейке сетки.