CSS-свойства для grid-контейнера

В этом уроке мы изучим CSS-свойства, которые применяются к grid-контейнеру. Но перед этим давайте освежим в памяти, как вообще создается grid-контейнер и какие бывают его вариации.

Итак, для инициализации grid-контейнера необходимо применить к необходимому HTML-элементу свойство display, указав одно из трех следующих значений:

• grid (создает блочный grid-контейнер);
• inline-grid (создает строчный grid-контейнер);
• subgrid (если ваш grid-контейнер сам по себе является grid-элементом, вы можете использовать это свойство, чтобы размеры его строк/столбцов были взяты из его родительского элемента).

.grid-container {
    display: grid;
}

Обратите внимание: на grid-контейнер не оказывают влияния такие свойства, как float, clear, vertical-align и column.

Теперь рассмотрим специальные свойства для grid-контейнера:

• grid-template-rows, grid-template-columns
• grid-template-areas
• grid-template
• grid-row-gap, grid-column-gap
• grid-gap
• justify-items
• align-items
• justify-content
• align-content
• grid-auto-rows, grid-auto-columns
• grid-auto-flow
• grid

Свойства grid-template-rows и grid-template-columns

Данные свойства определяют размеры строк и столбцов сетки. В значениях указываются необходимые параметры через пробел, которые означают размеры каждого grid-пути, а между ними можно указывать названия grid-линий.

Значения:

• <длина-пути> — может быть указана в единицах измерения длины CSS, в процентах или же в виде доли свободного места в сетке (с использованием единицы fr (англ. fraction));
• <имя-линии> — произвольное имя на ваше усмотрение, заключенное в квадратные скобки.

Схема:

.grid-container {
    grid-template-rows: <длина-пути> ...
                        или <имя-линии> <длина-пути> ...;
    grid-template-columns: <длина-пути> ...
                           или <имя-линии> <длина-пути> ...;
}

 

Если вы не указываете имена grid-линий между значениями grid-путей, то grid-линиям автоматически присваиваются числовые имена (1, 2, 3 и т. д.):

.grid-container {
    grid-template-rows: 50px auto 150px;
    grid-template-columns: 50px 100px auto 100px 50px;
}

 

Вы можете явно указать имена grid-линий:

.grid-container {
    grid-template-rows: [row-line1] 50px [row-line2] auto [row-line3] 150px [row-last-line];
    grid-template-columns: [col-line1] 50px [col-line2] 100px [col-line3] auto
                           [col-line4] 100px [col-line5] 50px [col-last-line];
}

 

Grid-линия может иметь несколько имен одновременно! В примере ниже третьей grid-линии будет присвоено два имени — col-three и the-end:

.grid-container {
    grid-template-columns: [col-one] 50% [col-two] 50% [col-three the-end];
}

 

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

.grid-container {
    grid-template-columns: 40px [col-40] 40px [col-40] 40px [col-40] 10%;
}

/* код выше эквивалентен коду ниже */

.grid-container {
    grid-template-columns: repeat(3, 40px [col-40]) 10%;
}

 

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

.grid-container {
    grid-template-columns: 1fr 1fr 1fr;
}

 

Вычисление свободного пространства происходит только после применения фиксированных значений. В примере ниже общий объем свободного пространства, доступного для значений fr, не включает в себя 70 пикселей:

.grid-container {
    grid-template-columns: 1fr 70px 1fr 1fr;
}

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

Свойство grid-template-areas определяет шаблон сетки, используя имена grid-областей, которые заданы с помощью свойства grid-area (данное свойство применяется к grid-элементам и рассматривается в следующем уроке). Количество повторов имени grid-области определяет, сколько grid-ячеек образует эта область. Точка обозначает пустую grid-ячейку. Сам синтаксис являет собой визуализацию структуры сетки.

Значения:

• <имя-области> — имя grid-области, заданное свойством grid-area;
• . — точка, которая обозначает пустую grid-ячейку;
• none — grid-области не определены.

Схема:

.grid-container {
    grid-template-areas: "<имя-области>
                         или .
                         или none 
                         или ..."
                         "...";
}

Пример использования:

.grid-item-header {
    grid-area: header;
}
.grid-item-main {
    grid-area: main;
}
.grid-item-sidebar {
    grid-area: sidebar;
}
.grid-item-footer {
    grid-area: footer;
}
.grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "header header header header header"
                         "main main main . sidebar"
                         "footer footer footer footer footer";
}

Этот код определяет сетку с пятью столбцами и тремя строками. Ширина столбцов одинаковая — каждый занимает одну долю (1fr) свободного пространства grid-контейнера. Вся верхняя строка является grid-областью с названием header и содержит пять ячеек. Средняя строка включает в себя трехъячеечную grid-область main, одну пустую ячейку и одноячеечную grid-область sidebar. Последнюю строку полностью занимает grid-область footer из пяти ячеек. Итоговая схема данной сетки выглядит так:

Важно: каждая строка в объявлении должна иметь одинаковое количество ячеек.

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

Обратите внимание, что здесь вы не даете имена grid-линиям, а именуете только grid-области. При этом grid-линии на обоих концах grid-областей будут получать имена автоматически. К примеру, если grid-область называется header, то начальная горизонтальная grid-линия и начальная вертикальная grid-линия получат имя header-start, а конечная горизонтальная grid-линия и конечная вертикальная grid-линия получат имя header-end. Таким образом некоторые grid-линии могут иметь несколько имен. В нашем примере выше крайняя левая grid-линия имеет три имени: header-start, main-start и footer-start.

Свойство grid-template

Свойство grid-template — это сокращенная запись, которая позволяет одновременно задать значения для свойств grid-template-rows, grid-template-columns и grid-template-areas.

Значения:

• none — устанавливает исходные значения для всех трех свойств;
• <grid-template-rows> / <grid-template-columns> — задает свойствам grid-template-columns и grid-template-rows соответствующие указанные значения, а свойству grid-template-areas присваивает значение none.

Схема:

.grid-container {
    grid-template: none
                   или <grid-template-rows> / <grid-template-columns>;
}

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

.grid-container {
    grid-template-rows: [row1-start] 100px [row1-end row2-start] 100px [row2-end];
    grid-template-columns: auto 50px auto;
    grid-template-areas: "header header header" 
                         "footer footer footer";
}

/* код выше эквивалентен коду ниже */

.grid-container {
    grid-template: [row1-start] "header header header" 100px [row1-end]
                   [row2-start] "footer footer footer" 100px [row2-end]
                   / auto 50px auto;
}

Поскольку свойство grid-template не сбрасывает неявные свойства сетки (grid-auto-columns, grid-auto-rows и grid-auto-flow), при том, что в большинстве случаев вы захотите это сделать, рекомендуем использовать свойство grid вместо grid-template.

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

Данные свойства определяют размеры grid-линий. Вы можете думать об этом как об установке промежутков между строками и столбцами. Значение задается в любых доступных единицах измерения CSS:

.grid-container {
    grid-column-gap: 15px;
    grid-row-gap: 30px;
}

Такие промежутки создаются только между строками/колонками, но не с внешних краев.

Свойство grid-gap

Как вы догадались, свойство grid-gap представляет собой сокращенную запись свойств grid-row-gap и grid-column-gap. В значении указываются два параметра через пробел — сначала для промежутков между строками, затем для промежутков между столбцами:

.grid-container {
    grid-gap: 30px 15px;
}

Если между строками и колонками планируются одинаковые промежутки, в значении свойства grid-gap можно указать один параметр.

Свойство justify-items

Свойство justify-items выравнивает содержимое внутри grid-элемента вдоль оси строки. Значение влияет на все grid-элементы контейнера.

Доступные значения:

• stretch (значение по умолчанию) — содержимое заполняет всю ширину grid-области;
• start — содержимое прижимается к левому краю grid-области;
• end — содержимое прижимается к правому краю grid-области;
• center — содержимое выравнивается по центру grid-области.

Ниже — серия примеров с использованием разных значений свойства justify-items:

.grid-container {
    justify-items: stretch;
}

.grid-container {
    justify-items: start;
}

.grid-container {
    justify-items: end;
}

.grid-container {
    justify-items: center;
}

Также можно задать выравнивание по оси строки для отдельных элементов сетки, используя свойство justify-self (мы рассмотрим его в следующем уроке).

Свойство align-items

Свойство align-items выравнивает содержимое внутри grid-элемента вдоль оси столбца. Применяется ко всем grid-элементам контейнера.

Доступные значения:

• stretch (значение по умолчанию) — содержимое заполняет всю высоту grid-области;
• start — содержимое прижимается к верхнему краю grid-области;
• end — содержимое прижимается к нижнему краю grid-области;
• center — содержимое выравнивается по центру grid-области.

.grid-container {
    align-items: stretch;
}

.grid-container {
    align-items: start;
}

.grid-container {
    align-items: end;
}

.grid-container {
    align-items: center;
}

Также можно задать выравнивание по оси столбца для отдельных элементов сетки, используя свойство align-self (будет рассмотрено в следующем уроке).

Свойство justify-content

Может случиться так, что общий размер сетки будет больше, чем размер grid-контейнера. Например, такое может произойти, если ширина всех grid-элементов является фиксированной (т. е. задана в таких единицах как px). В этом случае вы можете установить выравнивание сетки в grid-контейнере с помощью свойства justify-content. Это свойство выравнивает сетку вдоль оси строки.

Доступные значения:

• stretch — изменяет размеры grid-элементов так, чтобы сетка могла заполнить всю ширину grid-контейнера;
• start — выравнивает сетку по левому краю grid-контейнера;
• end — выравнивает сетку по правому краю grid-контейнера;
• center — выравнивает сетку по центру grid-контейнера;
• space-around — добавляет равное количество пространства между каждым grid-элементом, а по краям сетки оставляет половину этого пространства;
• space-between — добавляет равное количество пространства между каждым grid-элементом, но по краям сетки не создает пространства;
• space-evenly — добавляет равное количество пространства между каждым grid-элементом, включая края сетки.

.grid-container {
  justify-content: stretch;
}

.grid-container {
  justify-content: start;
}

.grid-container {
  justify-content: end;
}

.grid-container {
  justify-content: center;
}

.grid-container {
  justify-content: space-around;
}

.grid-container {
  justify-content: space-between;
}

.grid-container {
  justify-content: space-evenly;
}

Свойство align-content

Данное свойство похоже на предыдущее, с той лишь разницей, что теперь выравнивание сетки происходит по оси столбца. Свойство align-content принимает те же значения, что и justify-content (вы можете посмотреть их выше). Мы не будем их дублировать, но упомянем об отличии значений start и end: если в случае со свойством justify-content сетка выравнивается по левому (start) или правому (end) краю, то при использовании данных значений со свойством align-content сетка будет выравниваться либо по верхнему краю grid-контейнера (start), либо по нижнему (end).

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

Данные свойства определяют размеры любых grid-путей, сгенерированных автоматически (неявных grid-путей). Неявные grid-пути создаются, когда вы явно задаете позицию строк и столбцов (через свойства grid-template-rows и grid-template-columns), которые находятся за пределами заданной сетки.

В качестве значения устанавливается размер пути в любых единицах измерения длины CSS, а также в процентах или долях свободного пространства fr.

Чтобы понять, как создаются неявные grid-пути, взгляните на демонстрацию ниже:

.grid-container {
    grid-template-rows: 150px 150px;
    grid-template-columns: 250px 250px;
}

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

.item-a {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
}
.item-b {
    grid-row: 2 / 3;
    grid-column: 5 / 6;
}

Мы сказали элементу .item-b начинаться в столбце 5 и заканчиваться в столбце 6, но мы никогда не создавали столбцы 5 и 6. Именно потому, что мы ссылаемся на несуществующие столбцы, появятся неявные grid-пути с шириной 0. И мы можем использовать свойства grid-auto-rows и grid-auto-columns для определения размеров этих неявных grid-путей:

.grid-container {
    grid-auto-columns: 250px;
}

Свойство grid-auto-flow

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

Допустимые значения:

• row (значение по умолчанию) — говорит алгоритму авторазмещения заполнять каждую строку сетки поочередно, добавляя новые строки по мере необходимости;
• column — говорит алгоритму авторазмещения заполнять каждый столбец сетки поочередно, добавляя новые столбцы по мере необходимости;
• dense — говорит алгоритму авторазмещения попытаться заполнить ранее образовавшиеся промежутки в сетке, если появятся подходящие по размеру grid-элементы. Важно: это может привести к изменению порядка вывода элементов.

Например, взгляните на этот HTML-код:

<div class="grid-container">
    <div class="item-a">item-a</div>
    <div class="item-b">item-b</div>
    <div class="item-c">item-c</div>
    <div class="item-d">item-d</div>
    <div class="item-e">item-e</div>
</div>

Мы определяем сетку с двумя строками и пятью столбцами и задаем свойство grid-auto-flow со значением row:

.grid-container {
    display: grid;
    grid-template-rows: 150px 150px;
    grid-template-columns: 250px 250px 250px 250px 250px;
    grid-auto-flow: row;
}

При размещении элементов в сетке укажем позиции только для двух из них:

.item-a {
    grid-column: 1;
    grid-row: 1 / 3;
}
.item-e {
    grid-column: 5;
    grid-row: 1 / 3;
}

Поскольку мы установили значение row для свойства grid-auto-flow, наша сетка будет выглядеть так. Обратите внимание, как три элемента, которые мы не размещали (.item-b, .item-c и .item-d), размещаются в строках самостоятельно:

И, соответственно, если мы зададим для свойства grid-auto-flow значение column, то элементы .item-b, .item-c и .item-d разместятся в столбцах:

.grid-container {
    display: grid;
    grid-template-rows: 150px 150px;
    grid-template-columns: 250px 250px 250px 250px 250px;
    grid-auto-flow: column;
}

Свойство grid

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

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

Также свойство grid устанавливает исходные значения для свойств grid-column-gap и grid-row-gap, даже если они не заданы явно в данном свойстве.

Значения:

• none — устанавливает значения по умолчанию для всех свойств;
• <grid-template-rows> / <grid-template-columns> — устанавливает указанные значения для свойств grid-template-rows и grid-template-columns соответственно, а также задает значения по умолчанию для других свойств;
• <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ] — устанавливает указанные значения для свойств grid-auto-flow, grid-auto-rows и grid-auto-columns соответственно. Если значение для свойства grid-auto-columns не задано, то ему задается значение, установленное для grid-auto-rows. Если значения не заданы для обоих свойств, устанавливаются значения по умолчанию.

Схема:

.grid-container {
    grid: none
          или <grid-template-rows> / <grid-template-columns>
          или <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
}

 

Следующие блоки CSS-кода идентичны по своему действию:

.grid-container {
  grid-template-rows: 150px auto;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: none;
}

/* код выше эквивалентен коду ниже */

.grid-container {
  grid: 150px auto / 1fr auto 1fr;
}

Следующая пара также эквивалентна:

.grid-container {
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
  grid-auto-columns: auto;
}

/* код выше эквивалентен коду ниже */

.grid-container {
  grid: column 1fr / auto;
}

Свойство grid также понимает более сложный, но удобный синтаксис для установки всех параметров сразу. Вы определяете свойства grid-template-areas, grid-template-rows и grid-template-columns, а для всех остальных свойств устанавливаются их значения по умолчанию. Иными словами, вы определяете имена grid-линий, размеры grid-путей и шаблон сетки. Это проще описать на примере:

.grid-container {
    grid-template-areas: "header header header"
                         "footer footer footer";
    grid-template-rows: [row1-start] 1fr [row1-end row2-start] 30px [row2-end];
    grid-template-columns: auto 65px auto;    
}

/* код выше эквивалентен коду ниже */

.grid-container {
    grid: [row1-start] "header header header" 1fr [row1-end]
          [row2-start] "footer footer footer" 30px [row2-end]
          / auto 65px auto;
}

---

Далее в учебнике: свойства для grid-элементов.