grid-area - задает область где должен размещатся блок в сетке грид, а также дает элементу имя, чтобы на него мог ссылаться шаблон, созданный с помощью свойства grid-template-areas. В качестве альтернативы, это свойство может использоваться как еще более короткое сокращение для grid-row-start + grid-column-start + grid-row-end + grid-column-end.
CSS-свойство place-self - это сокращенное свойство, устанавливающее свойства align-self и justify-self. Первое значение является значением свойства align-self, второе - значением justify-self. Если второе значение отсутствует, для него также используется первое значение.
align-self - выравнивает элемент сетки внутри ячейки вдоль оси блока (столбца) (в отличие от justify-self, которое выравнивается по оси inline (строки)). Это значение применяется к содержимому внутри одного элемента сетки.
justify-self - Выравнивает элемент сетки внутри ячейки вдоль встроенной оси (строки) (в отличие от align-self, которое выравнивается вдоль оси блока (столбца). Это значение применяется к элементу сетки внутри одной ячейки.
grid-template-areas - Определяет шаблон сетки, ссылаясь на имена областей сетки, которые указаны с помощью свойства grid-area. Повторение имени области сетки приводит к тому, что содержимое охватывает эти ячейки. Точка означает пустую ячейку. Сам синтаксис обеспечивает визуализацию структуры сетки.
grid-template-columns и grid-template-rows - определяет столбцы и строки сетки с разделенным пробелами списком значений. Значения представляют размер дорожки, а пространство между ними представляет линию сетки.
CSS-свойство place-content является сокращением для align-content и justify-content. Он может использоваться в любом методе компоновки, который использует оба этих значения выравнивания. place-conten - это выравнивае сетки в контейнере grid