Создание дизайна с помощью CSS Grid

Спецификация CSS Grid  сложна для понимания и предлагает несколько новых и довольно сложных концепций. Данную статью следует рассматривать как обзор, а не как всесторонний анализ Grid.

Содержание

Создание Grid

Добавление display: 

grid
запускает механизм формирования сетки для этого элемента и его дочерних элементов. В результате:

  1. Элемент становится блочным.
  2. Его дочерние элементы создают ячейки, которые можно упорядочить в строки и столбцы. Непосредственными дочерними элементами
    grid
    -контейнера являются
    grid
    элементы.
  3. Каждый элемент в строке сетки будет иметь ту же высоту, что и самый высокий элемент, если не задано явное значение высоты. Когда документ использует вертикальный режим записи данных, элемент принимает ту же длину, что и самый длинный элемент.

Использование display

grid
  создает блочный контейнер и ячейки для его дочерних элементов.

Применение display

inline-grid
 создает строчный grid-контейнер.

Применение display

inline-grid
создает строчный grid-контейнер

Но сами по себе display

grid
и display
inline-grid
не будут автоматически располагать эти ячейки в строки и столбцы. Нам придется указать браузеру, где и как их размещать.

Определение grid-макета

После определения

grid
-контейнера необходимо указать браузеру, сколько строк и столбцов должно содержаться в сетке. Для этого используются свойства
grid-template-rows
и 
grid-template-columns
. Они применяются к
grid
-контейнеру.

Вы можете использовать различные единицы измерения, проценты, значения

auto
min-content
 и 
max-content
.

.grid {
    display: grid;
    grid-template-columns: 25rem 25rem 25rem;
    grid-template-rows: 10rem 10rem;
}

Мы определили grid с тремя столбцами (каждый шириной 25rem) и двумя строками высотой 10rem. Разметка, которая нам потребуется:

<div class="grid">
    <div>Grid item A</div>
    <div>Grid item B</div>
    <div>Grid item C</div>
    <div>Grid item D</div>
    <div>Grid item E</div>
</div>

Наши  grid-элементы организованы в столбцы и строки, как показано ниже.

Создание сетки с помощью

grid-template-columns
и 
grid-template-rows

Давайте изменим значение

grid-template-columns
на 25
rem
 15
rem
 25
rem
:

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
}

В результате второй столбец сетки стал уже, чем первый и третий.

Столбцы и строки сетки не обязательно должны быть одинаковой ширины.

Явный и неявный Grid

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

У контейнера есть только пять дочерних элементов. Оставшиеся позиции пусты. Что произойдет, когда мы добавим больше дочерних элементов в контейнер.

Когда количество grid-элементов превысит количество явно определенных ячеек, оставшиеся элементы cформируют неявный Grid.

Теперь у нас есть три строки. Заметьте, что высота третьей строки задается только содержимым и отступом. Она является частью сетки, поскольку данные элементы являются дочерними к grid-контейнеру. Но строка неявно определена с помощью

grid-template-rows
. Вместо этого мы получили явный grid с дополнительными элементами, количество которых превышает определенное количество явно заданных ячеек.

Размер элементов неявного Grid по умолчанию устанавливается как

auto
. Элементы сетки будут расширяться, чтобы разместить свое содержимое. Если мы установим
height
контейнера в 50
rem
, то высота трека явного Grid расшириться до 30
rem
.

Строки неявного Grid расширяются, чтобы заполнить доступную высоту контейнера.

Если мы добавим достаточно элементов, чтобы создать четвертую строку, высота ячеек неявного Grid будет равномерной на все 30

rem
вертикального пространства контейнера. Их расчетная высота будет по 15
rem
.

Высота строк неявного Grid будет равномерна.

В первоначальном примере мы определили только две строки, каждая высотой 10

rem
. Поэтому размеры третьей строки по умолчанию устанавливается как
auto
. Ее высота будет подогнана к размеру содержимого и отступам.

Определение размера элементов неявного Grid

Можно задать высоту или ширину по умолчанию для элементов неявного Grid, используя

grid-auto-rows
и 
grid-auto-columns
. Обновим код CSS, добавив
grid-auto-rows
:

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
    grid-auto-rows: 30rem;
}

Теперь высота элементов третьей и последующих строк будет составлять 30

rem
.

Использование grid-auto-rows для определения высоты элементов сетки

Есть один недостаток при использовании свойств

grid-auto-*
. Если содержимое grid-элемента превышает его размер, оно переполняет контейнер и может визуально обрезаться элементами других строк.

Содержимое grid-контейнера может переполнять контейнер при значении длины, выраженной в единицах измерения или процентах.

Единственный способ избежать подобного – это использовать функцию minmax(). Добавим ее в наш CSS:

.grid {
    display: grid;
    grid-template-columns: 25rem 15rem 25rem;
    grid-template-rows: 10rem 10rem;
    grid-auto-rows: minmax(30rem, auto);
}

Функцию minmax() позволяет нам определить минимальный и максимальный размер трека (строк и колонок).

В данном случае высота ряда будет составлять не менее 30

rems
. Но мы установили максимальный размер на auto, поэтому трек будет расширяться, чтобы вместить содержимое ячейки.

Функции minmax() может принимать длину в единицах измерения или процентах. А также одно из ключевых слов 

auto
min-content
и
max-content
. При minmax(30
rem, max-content
) мы получили бы такой же эффект.

Если ширина grid-контейнера составляет 70

rem
, grid-template-columns
25rem 15rem 25rem
;, то заполнится только 90% его горизонтального пространства. Но  если ширина grid-контейнера всего  
50rem
, то общая ширина столбцов будет выходить за его границы.

Единственный способ избежать такой ситуации – использовать единицы гибкости.

Создание Grid с помощью flex

Единица гибкости (fr) показывают браузеру, какую долю или часть оставшегося пространства в grid-контейнере следует выделить каждому элементу сетки. Она выражает отношение, а не целую величину длины как

px
em
или 
cm
.

Например, если ширина grid-контейнера составляет 1000

px
, а значение
grid-template-columns
  равно 3
fr
 2
fr
 1
fr
, то ширина столбцов будет
500px
333.33px
 и 
133.33px
. Ширина  каждого столбца распределяется пропорционально исходя из доступного места.

Элементы flex поддерживают пропорции, а не абсолютную длину

Исходя из этого, grid-template-columns

2fr 2fr 2fr
 равно grid-template-columns
1fr 1fr 1fr
. В результате столбцы будут иметь равную ширину при горизонтальной записи, а строки – равную высоту при вертикальной записи.

Примечание:

fr
 не являются значениями длины. Поэтому она не совместима с
px
 и 
rem
, шириной, выраженной в процентах. Нельзя использовать единицы
fr
с функцией
calc()
. Например,
calc(1fr - 1rem)
является недопустимым значением длины.

Использование сокращенного свойства grid-template

Также можно указать количество строк и столбцов, используя свойство grid-template. Его синтаксис:

grid-template: [row track list] / 

Рассмотрим приведенный ниже код CSS:

.grid {
    display: grid;
    grid-template-columns: 25rem 25rem 25rem;
    grid-template-rows: 10rem 10rem;
}

Мы можем объединить вторую и третью строки, используя using 

grid-template
:

.grid {
    display: grid;
    grid-template: 10rem 10rem / 25rem 25rem 25rem;
}

Повторяющиеся строки и столбцы

Иногда нужна сетка из столбцов и строк, которые повторяются автоматически. Для этого можно использовать функцию repeat():

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

Функция repeat() принимает два аргумента:

  • Сколько раз повторять список трека.
  • Список трека для повторения.

Первый аргумент может быть выражен положительным целым числом или ключевыми словами

auto-fit
 или 
auto-fill
. Приведенный выше CSS-код создает следующий Grid:

Повторяющийся Grid с единицами измерения

fr
.

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

grid-template-columns:repeat(21fr 3fr)
; создает сетку, состоящую из четырех столбцов. В нем ширина первого и третьего столбца составляет одну треть ширины второго и четвертого столбца. В обоих случаях значение
grid-template-rows
 установлено на
auto
.

Повторяющийся шаблон Grid из двух столбцов.

Повторяющиеся столбцы с auto-fit или auto-fill

В чем же разница между

auto-fit
 и
auto-fill
? Она трудно уловима, но существенна.

  • auto-fill
     размещает максимальное количество grid-элементов в строке трека, при необходимости добавляя дополнительные дорожки трека.
  • auto-fit
     размещает максимальное количество grid-элементов в строке трека, при необходимости расширяя или сужая размеры каждого трека.

Эта разница становится очевидной, когда ширина grid-контейнера превышает максимальную общую ширину всех элементов. Например:

.grid {
    display: grid;
    width: 800px;
}
.autofill {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.autofit {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

Применим этот CSS к HTML:

<div class="grid autofill">
    <div>Grid item A</div>
    <div>Grid item B</div>
    <div>Grid item C</div>
    <div>Grid item D </div>
    <div>Grid item E</div>
</div>

<div class="grid autofit">
    <div>Grid item A</div>
    <div>Grid item B</div>
    <div>Grid item C</div>
    <div>Grid item D </div>
    <div>Grid item E</div>
</div>

Единственная разница между этими двумя макетами заключается в том, что один использует 

auto-fill
, а второй –
auto-fit
. Но сравним два Grid, показанных на рисунке ниже.

Сравнение

auto-fill
с
auto-fit

В обоих общая максимальная ширина элементов меньше, чем у grid-контейнера. Однако, на рисунке, приведенном выше, избыточное пространство

auto-fill
заполнено анонимными grid-элементами.

Визуализация разницы между

auto-fill
и
auto-fit
 с помощью grid-инспектора в Firefox

Взгляните на Grid, показанный ниже. Каждый элемент сетки растянут, чтобы заполнить доступное пространство. На рисунке, приведенном выше, показано как выглядят добавленные grid-ячейки в инструментах разработчика Firefox.

Заключение

CSS Grid – это обширная тема. В этой статье мы затронули только ее малую часть. К счастью, существует великое множество ресурсов, которые могут помочь вам узнать больше.

По моему мнению, спецификации CSS Grid  вполне читабельны. Это хорошая отправная точка для того, чтобы начать свое собственное исследование Grid.

Данная публикация представляет собой перевод статьи «Creating Layouts with CSS Grid» , подготовленной дружной командой проекта Интернет-технологии.ру

Меню