Разница между использованием свойства grid-template-areas и созданием макета с помощью grid-линий заключается в подходе к определению структуры сетки CSS Grid. 24

Использование grid-template-areas позволяет определять шаблон сетки, ссылаясь на имена областей, которые заданы с помощью свойства grid-area. 5 Каждый идентификатор в значении grid-template-areas соответствует ячейке сетки. 1 Как только все ячейки идентифицированы, браузер объединяет все смежные ячейки с одинаковыми именами в одну область, которая охватывает все их. 1

Создание макета с помощью grid-линий предполагает использование невидимых вертикальных и горизонтальных линий, разделяющих грид на ячейки. 4 За это отвечают свойства grid-column-start, grid-column-end, grid-row-start и grid-row-end. 4 При таком подходе код довольно сложно читать, и в случае серьёзного изменения макета придётся переписывать большой объём кода. 4