CSS Grid

CSS GridLayout
CSS GridLayout - самая мощная система компоновки из доступных на данный момент в CSS.
Это двумерная система, которая может обрабатывать как колонки так и строки, в отличии от Flexbox, который в значительной степени является одномерной системой.
При работе с CSS Grid, вы применяете CSS правила и родительским элементам (которые становятся Grid контейнерами) и к дочерним элементам (которые становятся Grid элементами).

Введение
CSS GridLayout (aka "Grid") - это двумерная система компоновки основанная на сетке, цель которой заключается в том чтобы полностью изменить способ проектирования пользовательских интерфейсов основанных на сетке.

Основные термины

Gridcontainer — это набор пересекающихся горизонтальных и вертикальных grid линий, которые делят пространство grid контейнера на grid области, в которые могут быть помещены grid элементы. Внутри grid контейнера есть два набора grid линий: один определяет ось столбцов, другой определяет ось строк.
Gridlines — это горизонтальные и вертикальные разделители grid контейнера. Эти линии находятся по обе стороны от столбца или строки. Автор может задать для данного элемента имя или числовой индекс, которые может использовать дальше в стилях. Нумерация начинается с единицы. Важный нюанс, данный элемент восприимчив к режиму написания, который используется на вашем ресурсе. Например, вы используете Арабский язык или любой другой язык у которого режим написания справа налево, то нумерация линий будет начинаться с правой стороны.
Gridtrack — это пространство между двумя смежными grid линиями, вертикальными или горизонтальными.
Gridcell — это наименьшая неделимая единица gridконтейнера на которую можно ссылаться при позиционировании grid элементов. Образуется на пересечении grid строки и grid колонки.
Gridarea — это пространство внутри grid контейнера, в которое может быть помещен один или больше grid элементов. Этот элемент может состоять из одной или более grid ячеек.
Каждый элемент тесно связан друг с другом и отвечает за определенную часть grid контейнера.
Основные термины

Первый CSS Grid макет
https://codepen.io/var-bin/embed/RpeEXd?height=300&slug-hash=RpeEXd&default-tabs=html,result&host=http%3A%2F%2Fcodepen.io&embed-version=2

Спецификации
1fr — это специальная единица измерения введенная в данной спецификации.
Она не измеряется в каких-то конкретных единицах измерения (px, em, rem, др.)
Из этого следует, что мы не можем использовать ее вместе с функцией calc().
Эта единица измерения не может быть меньше единицы, а также не может принимать отрицательные значения.
Она рассчитывается после того, как все остальные значения, отличные от fr, были рассчитаны.

auto — ведет себя довольно интересно и использует для расчета размеров хитрый алгоритм.
В некоторых ситуациях может показаться, что эта единица измерения работает точно также как и fr.
Главное отличие, auto будет рассчитан до того, как будет рассчитан fr.
Спецификации

Для разметки колонок и строк используются следующие правила:
grid-template-columns: 150px 1fr auto;
grid-template-rows: 50px auto 50px;
Сокращенная форма записи выглядит так:
grid-template: 50px auto 50px / 150px 1fr auto;
Спецификации

Источники
www.tuhub.ru/posts/css-grid-complete-guide