Разница между использованием grid-template-areas и традиционным способом создания сеток через grid-template-rows и grid-template-columns заключается в том, что grid-template-areas позволяет объединять несколько ячеек в одну и работать с ними как с единым целым, а grid-template-rows и grid-template-columns указывают, из скольких рядов (строк) и скольких колонок состоит сетка и какие у них размеры. 5

Таким образом, grid-template-areas помогает создавать области сетки, а grid-template-rows и grid-template-columns — определять количество строк и столбцов и их размеры. 25

Также для одновременной установки всех трёх свойств можно использовать свойство grid-template, которое является сокращённой записью для них. 2