Left = Right
Это означает, что «какая бы ни была правая сторона, поместите его как значение для левой стороны».
Все сравнения и другие проверки выполняются с помощью двух символы для ограничения двусмысленности и неправильных назначений переменных, когда вы просто хотели проверить значение.
!= means not equal to
== means equal
=== means equal and same object/datatype
= means "Assign the right side (Or what it evaluates to) to the variable on the left
По умолчанию элемент сетки не может быть меньше размера его содержимого.
Элементы сетки имеют начальный размер 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 */ }
min-width: 0
к обоим.month-grid
и.day-item
. Ответ пересмотрен. – Michael_B 15 April 2017 в 18:40