- Теория
- Теория
Комбинируем автоматические и явные координаты
Итак, мы выяснили, как свойства grid-template-columns
и grid-template-rows
влияют на количество и размеры столбцов и рядов грида, а свойства grid-column-start/grid-column-end
и grid-row-start/grid-row-end
помогают нам распределять грид-элементы по конкретным координатам в грид-раскладке.
Теперь самое время разобраться, как использовать эти свойства совместно.
Давайте создадим грид с нуля и определим для него столбцы и ряды, а затем будем управлять отдельными элементами.
Начнём с создания грид-контейнера. При его создании грид по умолчанию будет иметь всего один столбец во всю ширину контейнера, а каждый его элемент будет занимать целый ряд.
Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.