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

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

Создание Grid

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

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

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

Применение display: inline-grid создает строчный grid-контейнер.

Создание дизайна при помощи CSS 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-элементы организованы в столбцы и строки, как показано ниже.

Создание дизайна при помощи CSS 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;}

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

Создание дизайна при помощи CSS Grid

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

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

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

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

Создание дизайна при помощи CSS Grid

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

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

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

Создание дизайна при помощи CSS Grid

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

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

Создание дизайна при помощи CSS Grid

Высота строк неявного 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.

Создание дизайна при помощи CSS Grid

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

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

Создание дизайна при помощи CSS 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 . Ширина каждого столбца распределяется пропорционально исходя из доступного места.

Создание дизайна при помощи CSS Grid

Элементы 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:

Создание дизайна при помощи CSS Grid

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

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

Создание дизайна при помощи CSS Grid

Повторяющийся шаблон 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, показанных на рисунке ниже.

Создание дизайна при помощи CSS Grid

Сравнение auto-fill с auto-fit

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

Создание дизайна при помощи CSS Grid

Визуализация разницы между auto-fill и auto-fit при помощи grid-инспектора в Firefox

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

Заключение

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

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

Добавить комментарий

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