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

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

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

демонстрация jsFiddle

1fr vs 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