- Теория
- Теория
Испытание: разбиваем парк
Мы так увлеклись изучением особенностей грида, что не заметили, как пришла пора для ещё одного испытания. Надеюсь, вы ещё не забыли, как быть крутым ландшафтным дизайнером?
Теперь вам предстоит разбить небольшой парк, как мы уже привыкли — с газоном, скалами, озёрами, песком и, конечно же, лавой.
Для этого вам нужно:
- создать сетку грида с помощью
grid-template-columnsиgrid-template-rows; - задать элементам грида координаты с помощью
grid-columnиgrid-row; - либо же можно пойти другим путём и воспользоваться именованными областями и свойством
grid-template-areasдля объявления структуры грида.
Выбор за вами!
Размеры ячеек грида кратны 10px.
Задавайте значения свойствам grid-column-start/grid-column-end и grid-row-start/grid-row-end от 1 до 5 только для первых четырёх элементов с классами element--1, element--2, element--3 и element--4. Остальные элементы автоматически займут оставшиеся пустые ячейки грида.
Хотите применять объектно-ориентированный подход и современные возможности ECMAScript для разработки веб-приложений? Хотите уметь применять паттерны проектирования? Записывайтесь на профессиональный курс «JavaScript. Архитектура клиентских приложений». Цена 12 000 ₽.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.