02

Grid

Grid

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

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

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

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

  2. Принять задание по ссылке https://classroom.github.com/a/L2qumu9h. Клонировать репозиторий и приступить к работе по заданию. Разработка по этой и следующей лабораторной работе должна вестись в отдельной ветке.

  3. Создать демо страницу, которая состоит из нескольких секций:

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

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

Работы Яна Чихольда

Требования к 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 и как они работают?
Предыдущая Следующая