Размещение элементов в сетке с произвольной шириной, но с определенным интервалом

Question

Мне трудно найти подходящую технологию / технику для отображения моего макета.См. Рисунок:

Желаемое изображение макета

Этот макет похож на календарь.Пример ячейки обозначен синим цветом.Сложной частью для меня является то, что ячейка может иметь дочерний элемент, который должен занимать несколько ячеек / столбцов.Ширина календаря равна полной ширине, поэтому каждая ячейка имеет динамическую ширину.

Я изначально использовал таблицу HTML, но обнаружил, что она негибкая, поэтому я начал использовать CSS Grid.С помощью CSS Grid я все еще не могу достичь желаемого макета.Похоже, в сетку могут быть помещены только прямые дочерние элементы grid-контейнера (в моем случае это ячейки).Я хочу, чтобы дочерние элементы ячеек также были размещены по всей сетке.Это выглядит несколько поддерживаемым с использованием «display: contents», но это поддерживается не во всех браузерах, таких как IE и Edge.Я также вижу упоминание о спецификации CSS-подсеток, но она пока не доступна / не поддерживается.

Существуют ли какие-либо другие методы или стратегии верстки, которые должны позволять мой желаемый макет?

Редактировать: Вот скрипка: https://jsfiddle.net/sy70c2j6/1683. Мне бы хотелось, чтобы какой-нибудь стиль мог указать, что span2 и span3 охватывают 2 или 3 ячейки соответственно.

// This doesn't accomplish it, but I desire something like this
.span2 {
  grid-column: span 2;
}

Answer 1

Вы можете сделать это с помощью grid-layout.Вы можете создать строки и для каждой строки нарисовать линию с :after псевдоэлементом.И вы также можете создавать столбцы с absolute позиционированными элементами.Затем в каждой строке вы можете создать ячейки, которые могут занимать несколько столбцов.

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
}

.row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 20px;
  grid-column: span 7;
  position: relative;
}

.cols {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  z-index: -1;
  grid-gap: 20px;
}

.cols > div {
  border-left: 1px solid black;
  grid-column: span;
}

.row:after {
  content: '';
  border-bottom: 1px solid black;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

body {
  padding: 0;
  margin: 0;
}

.cell {
  border: 1px solid #8EBA75;
  background: #D5E7D3;
  padding: 20px;
}

.row-1 {grid-row: 1}
.row-2 {grid-row: 2}
.row-3 {grid-row: 3}


.col-1-4 {grid-column: 1 / 4;}
.col-1-2 {grid-column: 1 / 2;}
.col-3-4 {grid-column: 3 / 4}
.col-5-7 {grid-column: 5 / 7}
.col-3-5 {grid-column: 3 / 5}

<div class="grid">
  <div class="row">
    <div class="cell col-1-4 row-1"></div>
    <div class="cell col-1-2 row-2"></div>
  </div>
  
  <div class="row">
    <div class="cell col-3-4 row-1"></div>
    <div class="cell col-5-7 row-1"></div>
    <div class="cell col-3-4 row-2"></div>
    <div class="cell col-3-5 row-3"></div>
  </div>
  
  <div class="cols">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>