Контейнер-сетка устанавливает новый контекст форматирования для элементов сетки, который обуславливает следующие особенности:
Для элементов сетки блокируется их значение свойства display. Значение display: inline-block вычисляется в display: block, анонимные блоки текста также занимают всю ширину контейнера и образуют разрыв строки.
Размер элемента сетки в пределах содержащего блока определяется его областью сетки.
Расчеты элементов сетки для width: auto и height: auto зависят от их значений align-self:
align-self: normal; - незамещаемые элементы заполняют область сетки, замещаемые элементы используют собственные размеры;
align-self: stretch; - обе категории элементов заполняют область сетки;
align-self: start/center и т.д. - незамещаемые элементы устанавливают размеры в соответствии со своим содержимым, замещаемые элементы используют собственные размеры.
Поскольку соседние элементы сетки находятся в независимых областях сетки, то поля соседних элементов сетки margin не схлопываются.
Браузеры по-разному обрабатывают процентные значения свойств margin и padding, поэтому не рекомендуется использовать их при задании значений этих свойств.
Поля margin: auto; расширяются, поглощая свободное пространство в соответствующем измерении, поэтому могут использоваться для выравнивания элемента.