Урок 16 из 25
В прогрессе

16)Grid Layout

CSS Grid Layout — это модуль CSS, который определяет систему макета на основе двумерной сетки, оптимизированную для дизайна пользовательского интерфейса.

В заранее определенной гибкой сетке макета мы можем размещать дочерние элементы.

Grid Layout позволяет кардинально изменять структуру визуального макета, не требуя соответствующих изменений разметки. Комбинируя медиа-запросы со свойствами CSS, можно легко добавлять адаптивность для отображения на мобильных устройствах, сохраняя при этом более идеальную семантическую структуру HTML кода.

Давайте изучим CSS Grid Layout на примере страницы с шестью блоками.

Наш изначальный HTML код будет выглядеть так:

<div class="grid-init grid">
    <div class="box-init box">A</div>
    <div class="box-init box">B</div>
    <div class="box-init box">C</div>
    <div class="box-init box">D</div>
    <div class="box-init box">E</div>
    <div class="box-init box">F</div>
</div>

CSS код, он нам нужен для красоты и наглядности:

* {
    /*  width и height элементов включают в
        себя значения полей и границ  */
    box-sizing: border-box;
}
.grid-init {
    max-width: 400px; /* максимальная ширина контейнера */
    margin: auto; /* центрирование контейнера на странице */
    background-color: lightsteelblue; /* фон */
    padding: 10px; /* внутренние отступы */
}
.box-init {
    font-size: larger; /* размер шрифта */
    color: #fff; /* цвет текста */
    border-radius: 5px; /* скругление углов */
    background-color: #2196f3; /* цвет фона */
    border: 1px solid black; /* граница блока */
    padding: 10px; /* внутренние отступы */
    /*  выравнивание текста по центру блока
        с помощью CSS Flexbox  */
    display: flex;
    align-items: center;
    justify-content: center;
}

Наша страница будет выглядеть так:

 

 

 

Свойства display: grid и display:inline-grid

Для того чтобы создать грид, для контейнера с классом .grid мы добавляем свойство display: grid. У display: inline-grid, разница с обычным grid такая же, как у inline-block c block.
Итак, запишем:

.grid {
    display: grid;
}

С этого момента контейнер .grid будет являться гридом, визуально разницы мы пока не увидим, для этого нам понадобятся новые свойства которые мы рассмотрим далее.

 

Свойства grid-gap, row-gap и column-gap

Для задания отступов между ячейками грида используется grid-gap. Зададим ему значение в 10px.

.grid {
    display: grid;
    grid-gap: 10px;
}

В свою очередь grid-gap объединяет два свойства:

  1. row-gap — это расстояние между рядами.
  2. column-gap — это расстояние между колонками.

Если использовать отдельные свойства, то код будет выглядеть следующим образом.

.grid {
    display: grid;
    row-gap: 10px;
    column-gap: 10px;
}

Свойство grid-template-columns

Теперь добавим колонки.

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
}

Ширину мы можем указывать в любых CSS единицах длины, в процентах и в единицах fr.

fr (от fraction — часть) это новая форма единицы измерения созданная для гридов, которая позволяет добавлять столько колонок, сколько мы захотим, не заботясь о конкретном значении ширины колонки. Свободное место распределяется между такими колонками пропорционально количеству fr.

1fr 1fr 1fr — такая запись означает, что мы создаем 3 колонки одинаковой ширины.

Немного математики:

Ширина грида равна 400px. Если мы зададим для grid-template-columns следующие значения: 1.5fr 2fr 1fr, то ширина всех колонок будет равна 1.5fr + 2fr + 1fr= 4.5fr.

Теперь вычислим ширину каждой колонки. Первая колонка будет иметь ширину 1.5fr / 4.5fr * 400px. Что в итоге равно 133px. Соответственно рассчитаем остальные значения.

Вторая колонка 2fr / 4.5fr * 400px = 178px, третья колонка 1fr / 4.5fr * 400px = 89px. Т.е. мы могли задать колонки таким образом:

grid-template-columns: 133px 178px 89px;

В сумме общая ширина равна 400px.

В этом случае, если мы захотим добавить еще одну колонку либо наоборот убрать, нам придется пересчитать и заменить все значения вручную. С единицей измерения fr все пересчитается автоматически.

Свойство grid-template-rows

Это свойство позволяет добавлять строки в грид.

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

Давайте отвлечемся и посмотрим подробнее, что из себя представляет наш грид и разберем несколько новых понятий.

Грид-контейнер — элемент, в котором находится сетка грида.

Грид-линии — невидимые вертикальные и горизонтальные линии, разделяющие грид на ячейки. У грид линий есть нумерация, а также им можно задавать имена. На изображении помечены красными (вертикальные линии) и фиолетовыми стрелками (горизонтальные линии).

Грид-полосы — пространство, которое ограничено парой соседних грид-линий. Бывают вертикальные и горизонтальные.

Грид-ячейки — то, что получается на пересечении двух грид-полос. По аналогии с ячейками таблицы. На картинке это синие блоки с буквами, в количестве шести штук.

Грид-области — прямоугольники из смежных грид-ячеек. Каждая грид-область ограничена двумя парами грид-линий (парой вертикальных и парой горизонтальных).

Грид-интервалы — пустые пространства между соседними грид-полосами.

Свойства grid-auto-rows, grid-auto-columns и grid-auto-flow

В примере создания колонок вы могли заметить, что мы не задавали колонки. Это произошло потому что колонки и строки могут быть заданы в явном и в неявном виде.

Если мы не указываем grid-template-rows, это значит, что в случае надобности строки будут добавляться автоматически и будут неявными.

Высота строки на неявных гридах должна выставляться с помощью свойства grid-auto-rows.

В свою очередь для колонок есть свойство grid-auto-columns которое выставляет ширину колонки.

Свойство grid-auto-flow позволяет указать, что нужно использовать для авто-размещения элементов, строки или колонки. По умолчанию его значение равно row.

Рассмотрим пример, показывающий неявное добавление колонок. Для этого мы зададим grid-auto-flow равным column. Также уменьшим количество явно заданных колонок до двух. В этом примере в последней ячейке пропишем текст FF.

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
}

Хочу заметить важную вещь, это то что ячейки выстраиваются вдоль колонок, а не строк. A и B в первой колонке, C и D во второй и т.д.

Как видим, третья колонка добавилась автоматически и ее ширина формируется на основе контента в самой широкой ячейке. Давайте укажем ширину для этой колонки.

grid-auto-columns: 1fr;

Получаем уже привычный нашему глазу грид.

 

Функция repeat()

Эта функция позволяет сокращать объявление колонок и строк в случае повторяющихся значений.

Например у нас есть такой код.

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

Используя функцию repeat мы можем переписать наш код следующим образом.

.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

Домашняя работа:

  1. Игра КЛИК