Могу ли я сделать так, чтобы содержимое отображалось в среднем столбце макета CSS Grid только с одним div?

Question

Если у меня есть сетка из 3 столбцов, и я хочу, чтобы содержимое отображалось в столбце 2: правильно ли я понимаю, что содержимое ДОЛЖНО идти во 2-й столбец HTML, и мне нужно создать пустой элемент div в HTML

В приведенной ниже таблице я хочу, чтобы заголовок отображался в среднем столбце, поэтому перед этим я создал пустой div.

Нет способа заставить заголовок появиться в средней из трех колонок, хотя есть только один div?

** Обратите внимание, я не включил div для 3-го столбца, потому что мне это не нужно.

Codepen: https://codepen.io/emilychews/pen/rEoKPg

Фрагмент кода также включен ниже.

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.row {
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.grid {
  background: #f1f1f1;
  padding: 1rem;
}

<div class="row">
  <div class="grid grid-item-1"></div>
  <div class="grid grid-item-2">The Title</div>
</div>

Answer 1

Вам не нужно создавать пустой div, если вы используете grid-column-start, но вам нужно будет указать номер столбца.

<div class="row">
  <div class="grid grid-item-2">The Title</div>
</div>

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
}

.row {
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

.grid {
  background: #f1f1f1;
  padding: 1rem;
}

.grid-item-2 {
  grid-column-start: 2;
}

Answer 2

Да, вы можете.Удалите первый div, затем добавьте это в свой код CSS:

.grid-item-2 {
  grid-column-start: 2;
}

Ознакомьтесь с этой статьей по CSS Tricks с кратким описанием в CSS Grids: Полное руководство по сетке |CSS Tricks

Справочник MDN также очень хорош: CSS Grid Layout |MDN