CSS Grid: grid-row / column-start / end VS grid-area + grid-template-area.

Кажется, есть два способа решить, сколько ячеек охватывает элемент сетки:

Точнее, есть 3 способа размещения предметов. Из спецификации:

Содержимое контейнера сетки организовано в отдельные элементы сетки (аналогично гибким элементам), которые затем назначаются заранее определенным областям сетки. Их можно явно разместить с использованием координат с помощью свойств размещения в сетке или неявно разместить в пустых областях с помощью автоматического размещения. §8 Размещение элементов сетки

Итак, вы либо учитываете площадь, либо координируете, либо оставляете задание браузеру для автоматического размещения. В основном вы можете использовать только один способ.

Обратите внимание, что grid-area - это сокращенное свойство для явного размещения, которое также можно заменить на grid-row-start; grid-column-star; grid-row-end; grid-column-end;

Вот простой пример для иллюстрации:

.grid {
  display:inline-grid;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
}
.one > span {
  grid-area:a;
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
}
.two > span {
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:3;
  grid-area:a;
}

<div class="grid one">
  <span></span>
</div>

<div class="grid two">
  <span></span>
</div>

Вы можете ясно видеть, что у нас другой результат из-за порядка. Это логично, поскольку мы переопределяем свойства. Нет никакого заказа, но для вашего товара будет рассматриваться только одна конфигурация.

Вы можете проверить второй элемент, и вы получите такое вычисленное значение:

Вы не найдете свойство с именем grid-area, как не найдете свойство с именем background, margin, border и т. Д., Потому что все они будут заменены полными обозначениями.

Принимая во внимание размер, вы должны различать размер дорожек и размер предметов. В предыдущем примере мы не определяли какой-либо явный размер, поэтому ширина / высота элемента также будет определять размер дорожки.

Вы можете явно установить размеры дорожек, используя различные свойства, такие как grid-template-columns grid-template-rows, и вы заметите, что размер элемента сетки не всегда будет соответствовать размеру дорожек, и у нас может быть переполнение:

.grid {
  display:inline-grid;
  grid-template-columns:150px 150px;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
  grid-area:a;
}
.one > span {
  width:400px;
}
.two > span {
  width:100%;
}

.three > span {
  width:200%;
}

<div class="grid one">
  <span></span>
</div>

<div class="grid two">
  <span></span>
</div>

<div class="grid three">
  <span></span>
</div>

Мы определили размер дорожки равным 150px, и если элемент с большим размером, мы просто имеем переполнение. Вы также заметите, как будет вести себя перцетанж, поскольку дорожка будет содержащим блоком элемента сетки, а не контейнером сетки.

Используя инструменты разработчика, вы можете четко видеть следы:

Если, например, вы рассматриваете 1fr unit или auto, тогда ширина элемента будет использоваться для определения размеров:

.grid {
  display:inline-grid;
  grid-template-columns:1fr 150px;
  grid-template-areas:
    "a b"
    "c d";
  grid-gap:20px;
  border:1px solid;
}
span {
  width:50px;
  height:50px;
  background:red;
  grid-area:a;
}
.one > span {
  width:400px;
}

<div class="grid one">
  <span></span>
</div>

Итак, мы можем выделить 4 случая ¹:

1. размер элемента не определен и размер дорожки не определен: содержимое каждого элемента будет использоваться для определения элемента и размера дорожки.
2. размер элемента не определен и размер дорожки определен: элемент будет растянут, чтобы заполнить размер дорожки (в зависимости от содержимого элемента может возникнуть переполнение).
3. размер элемента определен и размер дорожки определен: между ними нет соотношения размеров, мы просто помещаем элемент внутри дорожки. У нас может быть переполнение или пустое пространство внутри дорожки.
4. размер элемента определен и размер дорожки не определен: размер элемента определяет размер дорожки. В зависимости от случаев он не будет определять его, но будет учитываться при подсчете. (например, здесь: https://stackoverflow.com/a/54639430/8620333)

^{1: это очень упрощено, чтобы мысли были более ясными. Алгоритм определения размера более сложный.}

С помощью свойства grid-template-areas вы ограничены прямоугольными областями сетки.

Благодаря свойствам grid-column-* и grid-row-* у вас больше гибкости.

• сетка-шаблон-области с ASCII-артом не работает
• Неправильная компоновка областей сетки в CSS Grid

С grid-template-areas вы можете создавать области сетки только внутри явной сетки.

С grid-column-* и grid-row-* вы можете выйти за пределы явной сетки, создавая области сетки в неявной сетке.

• Изменение столбцов шаблона сетки нарушает макет