CSS Grid не работает с формой [duplicate]

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

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

измененный кодеген