R: Есть что-нибудь подобноеtable-layout: fixed для CSS-сеток?

Я попытался создать календарь на год с большой сеткой 4x3 для месяцев и вложенными сетками 7x6 для дней.

Календарь должен заполнить страницу, поэтому контейнер годовой сетки получает ширину и высоту 100% каждый.

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

Вот рабочий пример:https://codepen.io/loilo/full/ryXLpO/

Для простоты, каждый месяц в этой ручке имеет 31 день и начинается в понедельник.

Я также выбрал смехотворно маленький размер шрифта, чтобы продемонстрировать проблему:

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

Есть ли способ предотвратить такое поведение?

Сначала я объявил, что моя годовая сетка имеет ширину и высоту 100%, поэтому, возможно, с этого и стоит начать, но я не смог найти какие-либо свойства CSS, связанные с сеткой, которые бы соответствовали этой потребности.

Отказ от ответственности: Я знаю, что есть довольно простые способы стилизовать этот календарь без использования CSS Grid Layout. Однако этот вопрос больше касается общих знаний по теме, чем решения конкретного примера.