grid-template-areas - Определяет шаблон сетки, ссылаясь на имена областей сетки, которые указаны с помощью свойства grid-area. Повторение имени области сетки приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис обеспечивает визуализацию структуры сетки.

grid-template-columns и grid-template-rows - определяет столбцы и строки сетки с разделенным пробелами списком значений. Значения представляют размер дорожки, а пространство между ними представляет линию сетки.

CSS-свойство place-content является сокращением для align-content и justify-content. Он может использоваться в любом методе компоновки, который использует оба этих значения выравнивания. place-conten - это выравнивае сетки в контейнере grid

place-items обьединяет в одной записи два параметра - align-items и justify-items place-items - это выравнивае ячеек в сетке

Иногда общий размер вашей сетки может быть меньше размера ее контейнера. Это может произойти, если все ваши элементы сетки имеют размеры с негибкими единицами, такими как px. В этом случае вы можете установить выравнивание сетки внутри контейнера сетки. Это свойство выравнивает сетку по оси блока (столбца) (в отличие от justify-content, которое

Иногда общий размер вашей сетки может быть меньше размера ее контейнера. Это может произойти, если все ваши элементы сетки имеют размеры с негибкими единицами, такими как px. В этом случае вы можете установить выравнивание сетки внутри контейнера сетки. Это свойство выравнивает сетку вдоль встроенной оси (строки) (в отличие от align-content,

align-items - Выравнивает элементы сетки вдоль оси блока (столбца) (в отличие от justify-items, который выравнивается вдоль оси (строки). Это значение применяется ко всем элементам сетки внутри контейнера. Наследуется: нет. Применяется ко: всем элементам. Значение по умолчанию: normal.

Выравнивает содержимое вдоль оси x строки (в отличии от align-items который выравнивает элементы вдоль оси столбца). Это значение применяется ко всем элементам сетки внутри контейнера. Наследуется: нет. Применяется ко: всем элементам.

Чистый минимальный код css с перемеными на котором оформлено окно чата whatsapp - при нажатии на кнопку приходит уведомление в ватсап!

Примеры оформления таблиц с помощью CSS. Подборка красивых таблиц и стилей к ним.