Контейнер-сетка устанавливает новый контекст форматирования для элементов сетки, который обуславливает следующие особенности:

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

Продолжение

Оглавление