Практическая работа. Создание сетки. Свойство display:grid Алгоритм работы: 1. Создайте структуру документа. В шапке укажите свои ФИО и группу. 2. Система Grid Layout состоит из родительского блока контейнера и вложенных в него элементов. Создайте HTML-разметку, где задайте контейнер для сетки, саму сетку с ячейками и немного украсьте CSS стилями (любыми, можно ни как в примере). Такая конструкция внешне будет напоминать таблицу, но она уже не имеет ничего общего с табличной версткой. Так же она лишена основного недостатка флексбоксов невозможности расположить блок по осям X и Y одновременно. 3. Для основного контейнера пропишите первое CSS-свойство: grid, так мы включаем grid-систему внутри контейнера. 4. После добавления свойства ничего не изменится. Для определения колонок, необходимо добавить специальное Grid-свойство: grid-templatecolumns. Данное свойство задает количество и ширину колонок. Создайте три колонки шириной по 150 пикселей. Теперь каждый элемент занимает свою колонку. В одной колонке может находится и большее количество элементов. 5. За создание рядов отвечает свойство grid-template-rows. Это свойство задает количество и высоту ряда. Создайте один ряд высотой 100 пикселей. 6. Добавьте в сетку еще 3 элемента. 7. Последние три элемента имеют дефолтную высоту. Для задания дефолтного значения высоты рядов существует свойство grid-auto-rows. Дефолтное значение высоты распространится на высоту всех элементов, у которых значение высоты не прописано. 8. Если убрать свойство высоты со значением grid-template-rows, то все элементы приобретут дефолтное значение высоты. 9. В отличие от флексбоксов, в гридах можно использовать свойства grid-column-gap, grid-row-gap, которые задают промежуток между колонками и рядами. Сокращенный вариант grid-gap может объединить оба свойства в одно с одинаковыми значениями промежутков. 10. Фракция (доля). Построение сетки через фиксированное значение ширины лишает сетку адаптивности. Чтобы это изменить, необходимо в шаблоне использовать единицу измерения fr. Каждая колонка теперь занимает свое место, а сетка стала адаптивной без дополнительных усилий.
