Не работает указание grid-областей

Question

Есть код HTML, css

.addForm {
  display: grid;
  grid-template-columns: repeat(20, 30px);
  grid-auto-rows: 30px;
  margin: 20px auto;
  grid-gap: 10px;
  grid-template-areas: "name name name name name name name name name name name name name name percent percent percent percent percent percent" "date-s date-s date-s date-s date-s date-s date-s percent percent percent percent percent" "date-e date-e date-e date-e date-e date-e date-e percent percent percent percent percent" "desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc" "desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc desc" "title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target title-target" "search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target search-target" "cats cats cats cats cats cats cats cats cats cats cats cats cats cats cats cats cats cats cats cats" "action action action action action action action action action action action action action action action action action action action action";
}

.addForm input {
  outline: none;
  border: none;
  padding: 0 5px;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
}

.addForm textarea {
  outline: none;
  border: none;
  padding: 0 5px;
  border-bottom: 1px solid black;
  margin-bottom: 10px;
}

.addForm__name {
  grid-area: name;
}

.addForm__percent {
  grid-area: percent;
}

.addForm__sDate {
  grid-area: date-s;
}

.addForm__eDate {
  grid-area: date-e;
}

.addForm__action {
  grid-area: action;
}

.addForm__desc {
  grid-area: desc;
}

.addForm__title-target {
  grid-area: title-target;
}

.addForm__search-target {
  /*width: 80%;*/
  margin-bottom: 10px;
  grid-area: search-target;
}

<form action="javascript:void(null)" onsubmit="add_Promotions(this)" method="post" id="newCatPromForm" class="addForm">
  <input type="text" name="pName" placeholder="Название акции" class="addForm__name">
  <input type="number" name="pPercent" placeholder="Процент акции" class="addForm__percent">
  <input type="date" name="pStartDate" placeholder="Начало акции" class="addForm__sDate">
  <input type="date" name="pEndDate" placeholder="Конец акции" class="addForm__eDate">
  <input type="hidden" name="action" value="promotions_addPromotion" class="addForm__action">
  <textarea name="pDesc" placeholder="Описание акции" class="addForm__desc"></textarea>
  <span class="addForm__title-target">Категории и подкатегории</span>
  <div class="addForm__search-target">
    <input type="search" placeholder="Ищем категорию или подкатегорию по названию" name="searchCat" id="sCat" data-list=".category-list">
  </div>
  <div class="category-list" id="allCat">
    {$aCats}
  </div>
  <button type="submit"><span>submit</span></button>
</form>

Ожидаемое поведение: Инпут с названием займет 1 строку по высоте и 16 колонок по длинне Дата старта и дата окончания - аналогично под ним Процент - займет 3 строки по высоте и 4 колонки по длинне Все остальные инпуты занимают всю ширину, блок с категориями и подкатегориями по высоте может быть больше одной строки.

Собственно проблема в том что браузер просто не принимает данное указание областей, хотя по синтаксису все ок Собственно вот скрин

Если указать только первую строку, или любую одну например

"name name name name name name name name name name name name name name percent percent percent percent percent percent"

то все отрабатывает. У меня такое подозрение что он крашится из-за большого количества колонок, что в принципе не должно происходить

Answer 1

В общем, мне помогло это исправление

grid-template-areas:
    "n n n n n n n n n n n n n n n p p p p p"
    "ds ds ds ds ds ds ds ds ds ds ds ds ds ds ds p p p p p"
    "de de de de de de de de de de de de de de de p p p p p"
    "d d d d d d d d d d d d d d d d d d d d"
    "tt tt tt tt tt tt tt tt tt tt tt tt tt tt tt tt tt tt tt tt"
    "st st st st st st st st st st st st st st st st st st st st"
    "cs cs cs cs cs cs cs cs cs cs cs cs cs cs cs cs cs cs cs cs";

Также я соответсвенно сделал краткие grid-area: n; для каждого элемента. Есть подозрение что у меня не работало по этой причине

Значение grid-template-areas должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.

Определение взято отсюда: Спецификация мозиллы

Хотя это по меньшей мере странно, но все же.

БЛОГ НА HUSL

Не работает указание grid-областей

Ответы (1 шт):