Grid

Цель: изучение принципов работы Grid и его свойств.

Содержание и порядок выполнения лабораторной работы:

1. Изучить принципы работы Grid и его свойств:

   • grid-контейнер, grid-элементы;
   • линии, треки, ячейки, области;
   • формирование явной и неявной структуры grid;
   • управление размерами элементов;
   • шаблон RAM;
   • выравнивание элементов;
   • порядок элементов;
   • различные способы расположения элементов в сетке.

2. К текущему проекту добавить новый документ grid.html, в футер добавить ссылку на эту страницу.

3. В документ grid.html скопировать ваш хедер и футер из основного документа.

4. Основной контент должен находиться в центре страницы, независимо от ширины окна браузера.

5. В grid.html создатать несколько нескольких секций:

   1. Воспроизвести одну из картин Пита Мондриана с минимальным количеством полос. Точность размеров не важна, только примерные пропорции. Выбираете любой вариант самостоятельно.
   2. Информационную панель (dashboard): боковая панель со ссылками, в основной части в первом ряду один график, во втором — три, в третьем — два. Использовать именованные области для сетки под боковая панель и основную часть. Для генерации графиков используйте сервис https://www.magicpattern.design/tools/svg-chart-generator или ему подобные.
   3. Галерею из квадратных изображений с использованием шаблона RAM. В центре, которых есть ссылка со стилями кнопки поверх изображения. Ссылку позиционировать используя только grid, без position.

Картины Пита Мондриана

Идея графиков

Требования к html и css:

• Код html и css отформатирован;
• Корректное использование тегов;
• Корректно выбранные форматы изображений;
• Отсутствие ошибок на валидаторе для html и css.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

1. Спецификация CSS Grid Layout - w3
2. CSS Grid Layout - MDN
3. Grid guide
4. Ten modern layouts in one line of CSS
5. Игра для тренировки
6. Шпаргалки 1, 2
7. Примеры сеток
8. Генератор
9. Журнальная верстка в Web

Вопросы для защиты

1. Что такое CSS Grid и чем она отличается от flexbox?
2. Что такое линия, полоса, ячейка и область в CSS grid?
3. Как создать grid-контейнер и какие свойства используются для определения его характеристик?
4. Что такое полосы в grid и как их задать?
5. Как указать положение grid-элемента в сетке с помощью линий и областей?
6. Как задать размер полос в CSS grid и какие единицы измерения можно использовать?
7. Что такое шаблон RAM?
8. Что такое auto-fit и auto-fill в CSS grid и чем они отличаются?
9. Каковы различные типы выравнивания в CSS grid и как они работают?

Задать вопрос наставнику