Запретить содержимое от расширения элементов сетки

TL; DR: Есть ли что-то похожее 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. Однако этот вопрос больше касается общих знаний по теме, чем решения конкретного примера.

По умолчанию элемент сетки не может быть меньше размера его содержимого.

Элементы сетки имеют начальный размер min-width: autoи min-height: auto.

Вы можете переопределить это поведение, устанавливая элементы сетки в min-width: 0, min-height: 0или overflowс любым значением, кроме visible.

Из спецификации:

6.6. Автоматический минимальный размер элементов сетки

Для того, чтобы обеспечить более разумный минимальный размер по умолчанию для элементов сетки, Данная спецификация определяет , что autoзначение min-width/ min-heightтакже относится автоматический размер минимальной в указанной оси элементов сетки , чьи overflowэто visible. (Эффект аналогичен автоматическому минимальному размеру наложенных элементов)

Вот более подробное объяснение, охватывающее гибкие элементы, но оно также применимо и к элементам сетки:

• Почему гибкие элементы не уменьшаются до размера контента?

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

Чтобы исправить макет, внесите следующие изменения в свой код:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* NEW */
  min-width: 0;      /* NEW; needed for Firefox */
}

пересмотренный кодекс

1fr против minmax(0, 1fr)

Решение выше работает на уровне элемента сетки. Для решения на уровне контейнера, см. Этот пост:

• Почему minmax (0, 1fr) работает для длинных элементов, а 1fr - нет?

Предыдущий ответ довольно хорошо, но я также хотел бы отметить , что это фиксированный эквивалент макета для сетей, вам просто нужно написать minmax(0, 1fr)вместо того , чтобы 1frкак вашего размера трека.

Существующие ответы решают большинство случаев. Однако я натолкнулся на случай, когда мне нужно было содержимое ячейки сетки overflow: visible. Я решил это с помощью абсолютного позиционирования внутри оболочки (не идеальный, но лучший из известных мне), вот так:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

проще будет установить максимальную ширину элемента сетки следующим образом:

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }