Создание дизайна с помощью CSS Grid -шпаргалка для начинающих

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

Создание CSS Grid -шпаргалка для начинающих

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

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

Использование CSS 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 на 25rem 15rem 25rem:

.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 контейнера в 50rem, то высота трека явного Grid расшириться до 30rem.

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

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

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

В первоначальном примере мы определили только две строки, каждая высотой 10rem. Поэтому размеры третьей строки по умолчанию устанавливается как 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;
}

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

Использование 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() позволяет нам определить минимальный и максимальный размер трека (строк и колонок).

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

Функции minmax() может принимать длину в единицах измерения или процентах. А также одно из ключевых слов  auto, min-content и max-content. При minmax(30rem, max-content) мы получили бы такой же эффект.

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

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

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

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

Например, если ширина grid-контейнера составляет 1000px, а значение grid-template-columns  равно 3fr 2fr 1fr, то ширина столбцов будет 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(2, 1fr 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.

Пожалуйста, опубликуйте ваши отзывы по текущей теме статьи. За комментарии, подписки, лайки, отклики, дизлайки огромное вам спасибо!