Диапазон столбцов сетки занимает всю ширину, когда остальные столбцы пусты. ⇐ Javascript

[Гость]

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

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

Моя проблема возникает, когда у меня одновременно происходит группа событий, которая генерирует несколько столбцов, а затем в тот же день происходит событие, не имеющее совпадающих событий. Это событие теперь ограничено шириной столбцов, созданных на основе событий, произошедших ранее в тот же день.

Контекст см. на изображении: Изображение аннотированной демонстрации

См. ниже рабочую демонстрацию.

(function() { функция инициализации() { пусть CalendarElement = document.getElementsByClassName('calendar')[0], события = CalendarElement.getElementsByClassName('calendar__event'); _positionEventsOnGrid (события); } функция _positionEventsOnGrid(события) { Array.from(events).forEach(событие => { letgridRow = event.getAttribute('data-grid-row'); если (gridRow) { letgridRowSpan = event.getAttribute('data-grid-row-span'); event.style.gridRow = GridRowSpan? `${gridRow}/span ${gridRowSpan}` :gridRow; } }); } в этом(); })(); body { маржа: 0; размер блока: 100vh; встроенный размер: 100vw; } .календарь { $блок: &; встроенный размер: 100%; размер блока: 100%; дисплей: сетка; столбцы сетки-шаблона: 2.5rem 1fr; строки-шаблона сетки: авто 1fr; } .calendar__dayNames { строка сетки: 1; сетка-столбец: 2; дисплей: гибкий; } .calendar__dayName { гибкий рост: 1; гибкая основа: 0; } .calendar__schedule { строка сетки: 2; столбец сетки: 1/пролет 2; дисплей: сетка; столбцы сетки-шаблона: 2.5rem 1fr; border-block-start: 1px сплошной #000; } .calendar__timeline { дисплей: сетка; строки-шаблона сетки: повторение (19, 1,375рем); разрыв: 0 ​​0,625бэр; столбец сетки: 1/пролет 2; строка сетки: 1; положение: относительное; } .calendar__timelineItem { дисплей: гибкий; выровнять-элементы: по центру; border-block-end: 1 пиксель с пунктиром #222; } .calendar__timelineItem:nth-child(even) { border-block-end: 1px сплошной #000; } .calendar__timelineItem:nth-child(нечетный):после { дисплей: встроенный; содержимое: attr(данные-время); } .calendar__dayEventsContainer { положение: относительное; строка сетки: 1; сетка-столбец: 2; дисплей: гибкий; } .calendar__dayEvents { дисплей: сетка; строки-шаблона сетки: повторение (19, 1,375рем); разрыв: 0 ​​0,625бэр; border-inline-start: 1px сплошной #000; гибкий рост: 1; гибкая основа: 0; } .calendar__event { цвет фона: #346DA8; граница: никто; Понедельник Вторник Среда Четверг Пятница

Я попробовал несколько вещей: Grid-column: 1/-1, но это коснется всех событий и, следовательно, приведет к неправильному форматированию одновременных событий.

grid-auto-flow: плотный, однако в моем примере это, похоже, не помогло.

grid-template-columns: повторение(auto-fit, minmax()), но минимальное значение как часть minmax должно быть фиксированного размера.

Мне интересно, нужно ли мне расширить функцию PositionEventsOnGrid(), чтобы она проверяла, можно ли применять Grid-column: 1/-1 к конкретным событиям. Если это не совпадает с другими событиями того времени. Однако я чувствую, что это может быть довольно сложно, поэтому решил поспрашивать, нет ли более простого способа.

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