1 заметка с тегом

CSS Grid

Сетки на CSS

Примерный перевод статьи “Things I’ve learned about CSS grid layout” by Jennifer Wjertzoch

Используя CSS Grid вы можете создавать интересную и сложную верстку страницы. Это инструмент интуитивно понятный и его хорошо поддерживает основные браузеры. В этой статье я расскажу вам, как верстать страницу с CSS Grid.

Вывод простейшей сетки

Здесь вы видите контейнер (родителя) с шестью блоками (детьми) внутри:

Пример 1

See the Pen grid-1 by Aleksei Litvinov (@lexizli) on CodePen.



Пока ничего интересного, просто шесть div-ов, размещенных один над другим.

Определение строк и столбцов

Чтобы сделать дизайн двухмерным, нам нужно определить строки и столбцы. Давайте создадим две строки и три столбца. Для этого мы используем свойства grid-template-row и grid-template-column:

Пример 2

See the Pen grid-2 by Aleksei Litvinov (@lexizli) on CodePen.

Добавление интервалов между строками и столбцами

Для добавления интервалов между колонками можно использовать grid-column-gap, между строками grid-row-gap и вы можете использовать свойство grid-gap, чтоб добавить интервалы везде. Хорошо, что добавление интервалов происходит только между блоками, а за пределами контейнера их нет:

Пример 3

See the Pen grid-3 by Aleksei Litvinov (@lexizli) on CodePen.



Если вы откроете вашу страницу в Firefox Developer Edition и в инструментах разработчика включите подсветку сетки, то увидите примерно такую картину:

Размеры блоков и заполнение сетки

Для явного указания количества и размеров столбцов и строк можно использовать свойства:

grid-template-columns
grid-template-rows

существует и более компактный способ:

grid-template: 100px 100px / 150px 150px 150px;

или можно указать одинаковую высоту всех блоков:

grid-auto-rows: 50px;

Вот что из этого получится:

Пример 4

See the Pen grid-4 by Aleksei Litvinov (@lexizli) on CodePen.



Сетка может расти только в одном направлении, увеличивая число столбцов или строк. Свойства, которые определяют направление автоматического роста сетки:

grid-auto-flow: row; /* так будут добавляться новые строки */
grid-auto-flow: column; /* так — новые столбцы */
grid-auto-flow: dense; /* а это свойство для плотной упаковки */

Свойство dense укладывает блоки в сетке так, чтоб не оставалось пустых дырок, посмотрите, как расположены пронумерованные блоки:

Пример 5

See the Pen grid-5 by Aleksei Litvinov (@lexizli) on CodePen.

Функция Repeat()

Чтоб избежать многократного описания одинаковых по ширине или высоте блоков, заполняющих сетку, можно использовать функцию repeat(), первый аргумент которой определяет количество повторений, второй — размер блока (смотрите предыдущий пример):

grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(2, 100px);

Дробная единица fr

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

grid-template-columns: repeat(10, 1fr);

Можно использовать fr с любыми другими единицами:

grid-template-columns: 60% 1fr 2fr;

Определение индивидуальных размеров блока

Можно определять размеры столбцов и строк внутри контейнера, но можно установить и отдельные размеры для конкретного блока (или для конкретных повторяющихся блоков). Например, каждый шестой блок будет включать в себя шесть столбцов, а каждый девятый — две строки (см. пример 5):

.item:nth-child(6n) {
      grid-column: span 6;
    }
.item:nth-child(9n) {
      grid-row: span 2;
    }

Есть альтернативный способ размещения блока в сетке через свойства grid-row-start, grid-row-end, grid-column-start и grid-column-end, например, так:

.item3 {
  background:#98386d;
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 7;
}
.item4 {
  background:#f8386d;
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item5 {
  background:#383849;
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 4;
  grid-row-end: 7;
}

Пример 6

See the Pen grid-6 by Aleksei Litvinov (@lexizli) on CodePen.

Функция minmax

Позволяет установить минимальный и максимальный размер блока, превращая дизайн в адаптивный без медиазапросов (попробуйте изменить ширину окна браузера):

Пример 7

See the Pen grid-7 by Aleksei Litvinov (@lexizli) on CodePen.

auto-fill vs. auto-fit

Разницу этих свойств лучше всего проиллюстрирует сравнение:

Пример 8

See the Pen grid-8 by Aleksei Litvinov (@lexizli) on CodePen.


auto-fill заполняет строку блоками заданной ширины,
auto-fit  растягивает блоки так, чтоб они заняли все доступное пространство.

Выравнивание блоков по ширине контейнера

Для этого используйте свойство justify-content со значениями:

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

Пример 9

See the Pen grid-9 by Aleksei Litvinov (@lexizli) on CodePen.

Выравнивание блоков по высоте контейнера

Для этого подходит свойство align-content, значения аналогичны предыдущему свойству:

Пример 10

See the Pen grid-10 by Aleksei Litvinov (@lexizli) on CodePen.



Небольшой бонус: бесплатный видеокурс по CSS GRID от Wes Bos

 Нет комментариев    43   2019   CSS   CSS Grid   работа