Предотвращение расширения содержимого элементов сетки

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. Однако этот вопрос связан скорее с общими знаниями по этой теме, чем с конкретным примером.

Ответы

Ответ 1

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

Элементы сетки имеют начальный размер 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)

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

Ответ 2

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