Grid layout - система верстки, основанная на сетке. Для включения grid нужно задать родительскому контейнеру свойство display: grid/inline-grid (по аналогии с display:block/inline-block).

Также для контейнера можно задать количество и размер рядов и столбцов в свойствах grid-template-rows и grid-template-columns. Перед размером может стоять имя линии в квадратных скобках [line-name] размер.

Размер можно задавать в px, em, %, vh, vw и в fr (фракция - место распределяется по максимальному числу фракций, например 2 колонки шириной 1fr и 2fr займут всю ширину и вторая будет в 2 раза шире).

Кроме имени линии и размера можно указывать min-content/max-content — наименьший/наибольший размер контента. Для текста это ширина самого длинного слова или неразрывного фрагмента, auto — размер ряда/колонки подстраивается под размеры элементов, так, чтобы уместился самый большой из них. Не дает сжиматься меньше min-width или min-height самого широкого или высокого элемента соответственно. Не дает растягиваться больше, чем max-content. Если в контейнере есть свободное место, то размер может растянуться до конца контейнера.

fit-content( max ) — функция которой передается макс. размер. Если контент меньше этого размера, ведет себя как auto, если больше, то ограничивает размер ряда/колонки до указанного в параметре max.

minmax( min, max ) — функция, позволяет разом указать минимальный и максимальный размер.

Примеры значений свойств grid-template-rows и grid-template-columns:

grid-template-rows: none;
grid-template-rows: 100px 1fr;
grid-template-rows: [linename]  100px;
grid-template-rows: [linename1] 100px [linename2 linename3];
grid-template-rows: minmax(100px, 1fr);
grid-template-rows: fit-content(40%);
grid-template-rows: repeat(3, 200px);
grid-template-rows: 200px repeat(auto-fill, 100px) 300px;
grid-template-rows: minmax(100px, max-content)  repeat(auto-fill, 200px) 20%;
grid-template-rows: [linename1] 100px [linename2] repeat(auto-fit, [linename3 linename4] 300px)100px;
grid-template-rows: [linename1 linename2] 100px repeat(auto-fit, [linename1] 300px) [linename3];

 продолжение следует...