Итак, мы выяснили, как свойства grid-template-columns и grid-template-rows влияют на количество и размеры столбцов и рядов грида, а свойства grid-column-start/grid-column-end и grid-row-start/grid-row-end помогают нам распределять грид-элементы по конкретным координатам в грид-раскладке.

Теперь самое время разобраться, как использовать эти свойства совместно.

Давайте создадим грид с нуля и определим для него столбцы и ряды, а затем будем управлять отдельными элементами.

Начнём с создания грид-контейнера. При его создании грид по умолчанию будет иметь всего один столбец во всю ширину контейнера, а каждый его элемент будет занимать целый ряд.