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

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

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

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

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

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

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Знакомство с гридами» тренажёра «Погружение в техники раскладок» можно после регистрации и оформления подписки.