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

Question

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

Answer 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 */
}

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

Answer 2

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

Answer 3

Существующие ответы решают большинство случаев. Однако я столкнулся со случаем, когда мне нужно, чтобы содержимое ячейки сетки было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

Answer 4

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

//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
  }