Теория
Теория

Комбинируем автоматические и явные координаты

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

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

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

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

index.html
style.css

HTML

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Комбинируем автоматические и явные координаты</title> <link href="world.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="world"> <div class="land land--small"> <div class="element element--water element--simple">1</div> <div class="element element--grass element--simple">2</div> <div class="element element--rocks element--simple">3</div> <div class="element element--lava element--simple">4</div> <div class="element element--sand element--simple">5</div> </div> </body> </html>

CSS

.land { }

ЗадачиВыполнено

Для блока .land задайте отображение гридом,
затем с помощью свойства grid-template-columns задайте гриду три столбца: 100px, 100px, 100px,
а с помощью свойства grid-template-rows три ряда: 100px, 100px, 100px.

Комбинируем автоматические и явные координаты

Вход

Регистрация

Восстановление доступа