Grid

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

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

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

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

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

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

4. Добавьте к ним группирующую обертку в виде элемента div с классом wrapper. Код класса приведен ниже.

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

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

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

7. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на Github.

.wrapper {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

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

Требования к коду

1. Отсутствие ошибок на валидаторе для html и css;
2. Код отформатирован.

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

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

Источники

1. Гайд по grid
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
10. Спецификация CSS Grid Layout - w3

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

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