Создание макета сетки CSS с повторяющимися строками и разреженным заголовком

Question

Я пытаюсь использовать сетку CSS для макета и не понимаю, как это сделать. Вот набросок компоновки:

(empty)   | (empty)   | label     | (empty)
---------------------------------------------
col1      | col2      | col3      | col4

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

В идеале, я ' d также хотелось бы иметь возможность просто перебросить дочерние элементы в контейнер сетки и заставить их перетекать в нужные места без необходимости указывать на них grid-area.

То есть, в идеале я могу создать этот макет с эта разметка:

<div class="grid-container">
  <div>label</div>
  <div>col1</div>
  <div>col2</div>
  <div>col3</div>
  <div>col4</div>
</div>

Я просматриваю документацию по сетке около часа и не могу понять, как это сделать. Есть советы?

Answer 1

1. Использование grid-area: 1 / 3 / 2 / 4; для нашего .label div. Пришлось добавить к нему класс. 1 / 3 / 2 / 4 означает grid-row-start / grid-column-start / grid-row-end / grid-column-end . Обычно мы помещаем .label в третий столбец первой строки с ним. Подробнее об этом здесь https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
2. Мы можем использовать ::before в качестве первого элемента с полной шириной, используя grid-area: 1 / 1 / 2 / 5;. grid обрабатывает ::before как первый элемент.
3. Использование z-index для установки одного элемента поверх другого. z-index работает некоторым c способом для grid детей. Подробнее здесь https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout (Контроль перекрывающегося содержимого)

Другой дочерний элемент работает без специальных настроек c grid-area, как вы можете видеть.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(20px, auto);
  grid-column-gap: 1px;
  grid-row-gap: 1px;
}

.grid-container::before {
  content: '';
  grid-area: 1 / 1 / 2 / 5;
  z-index: 1; 
  background: cyan;
}
.grid-container .label {
  grid-area: 1 / 3 / 2 / 4;
  z-index: 2;
}

<div class="grid-container">
  <div class="label">label</div>
  <div>col1</div>
  <div>col2</div>
  <div>col3</div>
  <div>col4</div>
  <div>col1</div>
  <div>col2</div>
  <div>col3</div>
  <div>col4</div>
</div>