Свойства grid-template-areas, grid-template-columns и grid-template-rows отличаются по своему назначению:

• grid-template-areas определяет шаблон макета сетки, ссылаясь на имена областей элементов, которые задаются с помощью свойства grid-area. 1 Каждое имя в grid-template-areas соответствует определённому объекту. 3 Одинаковые имена, стоящие рядом, собирают несколько ячеек в единое целое — то есть в грид-область. 3
• grid-template-columns и grid-template-rows указывают, из скольких рядов (строк) и скольких колонок состоит сетка и какие у них размеры. 4 В значении через пробелы указываются размеры: высота ряда (rows) или ширина колонки (columns). 4 Сколько раз будет указан размер, столько будет рядов/колонок. 4