Грид-разметка CSS

Грид-разметка CSS (CSS Grid Layout) – это сетка из горизонтальных и вертикальных линий, которые образуют столбцы и строки.

Грид-разметка объединяет в себе набор свойств для родительского грид-контейнера и для дочерних грид-элементов.

Чтобы элемент стал грид-контейнером, ему надо присвоить display: grid; или display: inline-grid; (блочный или строчный соответственно).

Свойства grid-контейнера

grid-template-columns
Определяет число и (ширину) столбцов. Возможные значения:
  • none – столбцы создаются по необходимости (по умолчанию);
  • auto – определяется размером контейнера, а также размером содержимого элементов в столбце;
  • max-content – размер, в который должен поместиться весь контент без переноса на новую строку;
  • min-content – размер, равный длине самой широкой части контента;
  • значение – может указываться как в относительной (rem, em, %, fr), так и в абсолютной величине (px);
  • repeat() – функция, первый параметр которой – число повторений, второй – ширина или несколько ширин через пробел.
grid-template-rows
Определяет число и (высоту) строк. Возможные значения:
  • none – строки создаются по необходимости (по умолчанию);
  • auto – определяется размером контейнера, а также размером содержимого элементов в строке;
  • max-content – размер, в который должен поместиться весь контент без переноса на новую строку;
  • min-content – размер, равный высоте самой высокой части контента;
  • значение – может указываться как в относительной (rem, em, %, fr), так и в абсолютной величине (px);
  • repeat() – функция, первый параметр которой – число повторений, второй - высота или несколько высот через пробел.
grid
Определяет сразу два свойства grid-template-columns и grid-template-rows в формате:
grid: grid-template-columns / grid-template-rows;
Например, grid: repeat(4, 1fr) / repeat(3, 8rem);
grid-template-areas
Определяет области в грид-разметке путем размещения в них именованных элементов.
Например, grid-template-areas: 'header header header header' 'menu main main main' 'footer footer footer footer';
row-gap
Определяет промежутки между строками, т.е. вертикальные промежутки. Задается в px, %, em и других единицах измерения.
Например: row-gap: 24px;
column-gap
Определяет промежутки между столбцами, т.е. горизонтальные промежутки. Задается в px, %, em и других единицах измерения.
Например: column-gap: 16px;
gap
Определяет сразу два свойства row-gap и column-gap, может иметь одно или два значения.
Например: gap: 24px 16px;

Первоначально свойство определялось, как grid-gap. В CSS3 его заменили на gap. Поддержка браузерами.

justify-content
Определяет, как распределяется свободное пространство между grid-элементами по горизонтали. Возможные значения:
  • start – элементы прижимаются к левому краю (по умолчанию);
  • end – элементы прижимаются к правому краю – Пример;
  • center – элементы выравниваются по центру строки;
  • space-between – первый элемент прижимается к началу строки, последний - к концу, а оставшиеся выстраиваются так, чтобы между ними были одинаковые промежутки;
  • space-around – свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются, и расстояние между соседними элементами в два раза больше, чем расстояние от крайних элементов до концов строки;
  • space-evenly – свободное пространство делится поровну между элементами, при этом расстояние между соседними элементами и расстояние от крайних элементов до концов строки одинаковые – Пример.

Cвойство justify-content не срабатывает, если используются fr-единицы, и grid-контейнер имеет тот же размер, что и сетка.

justify-items
Определяет выравнивание элементов по горизонтали. Возможные значения:
  • start – элементы прижимаются к левым краям своих ячеек (по умолчанию);
  • end – элементы прижимаются к правым краям своих ячеек – Пример;
  • center – элементы выравниваются по центру своих ячеек;
  • stretch – элементы растягиваются, занимая всю ширину ячееек. Но если для элементов задана ширина, то значение stretch будет проигнорировано.
align-content
Определяет, как распределяется свободное пространство между grid-элементами по вертикали. Возможные значения:
  • start – элементы прижимаются к верхнему краю (по умолчанию);
  • end – элементы прижимаются к нижнему краю;
  • center – элементы выравниваются по центру столбца;
  • space-between – первый элемент прижимается к верху столбца, последний - к низу, а оставшиеся выстраиваются так, чтобы между ними были одинаковые промежутки;
  • space-around – свободное пространство делится поровну между элементами. Но стоит отметить, что промежутки суммируются, и расстояние между соседними элементами в два раза больше, чем расстояние от крайних элементов до верха и низа столбца;
  • space-evenly – свободное пространство делится поровну между элементами, при этом расстояние между соседними элементами и расстояние от крайних элементов до верха и низа столбца одинаковые.

Свойство align-content срабатывает, если в grid-контейнере больше одной строки элементов,
и высота родителя больше, чем суммарная высота всех элементов во всех строках.

align-items
Определяет выравнивание элементов по вертикали. Возможные значения:
  • start – элементы прижимаются к верху своих ячеек;
  • end – элементы прижимаются к низу своих ячеек;
  • center – элементы выравниваются по вертикальному центру своих ячеек;
  • stretch – элементы растягиваются, занимая всю высоту ячееек (по умолчанию).
place-items
Определяет сразу два свойства align-items и justify-items и именно в таком порядке.
Например: place-items: space-between end;
grid-auto-flow
Определяет порядок автоматического размещения элементов. Возможные значения:
  • row – элементы заполняют каждую строку поочередно, добавляя по мере необходимости новые строки (по умолчанию);
  • column – элементы заполняют каждый столбец поочередно, добавляя по мере необходимости новые столбцы;
  • dense – «плотный» алгоритм заполнения, который пытается занять отверстия в сетке, если позже появятся более мелкие элементы.
grid-auto-rows
Определяет размер строк. Возможные значения:
  • auto – высота строк определяется высотой контейнера (по умолчанию);
  • max-content – размер, в который должен поместиться весь контент без переноса на новую строку;
  • min-content – размер, равный высоте самой высокой части контента;
  • значение – может указываться как в относительной (rem, em, %, fr), так и в абсолютной величине (px);
  • minmax(min, max) – диапазон размеров: больше или равен min и меньше или равен max.
grid-auto-columns
Определяет размер столбцов. Возможные значения:
  • auto – ширина столбцов определяется шириной контейнера (по умолчанию);
  • max-content – размер, в который должен поместиться весь контент без переноса на новую строку;
  • min-content – размер, равный ширине самой широкой части контента;
  • значение – может указываться как в относительной (rem, em, %, fr), так и в абсолютной величине (px);
  • minmax(min, max) – диапазон размеров: больше или равен min и меньше или равен max.

Свойства grid-элементов

grid-column-start
Определяет, на каком столбце будет начинаться элемент. Возможные значения:
  • auto – элемент будет помещен после потока (по умолчанию);
  • значение – номер столбца, с которого должно начинаться отображение элемента.
grid-column-end
Определяет, сколько столбцов будет занимать элемент. Возможные значения:
  • auto – элемент будет занимать один столбец (по умолчанию);
  • span n – количество столбцов;
  • значение – номер столбца, на котором должно закончиться отображение элемента.
grid-column
Определяет сразу два свойства grid-column-start и grid-column-end в формате:
grid-column: grid-column-start / grid-column-end;
Например: grid-column: 1 / 3;
grid-row-start
Определяет, на какой строке будет начинаться элемент. Возможные значения:
  • auto – элемент будет помещен после потока (по умолчанию);
  • значение – номер строки, с которой должно начинаться отображение элемента.
grid-row-end
Определяет, сколько строк будет занимать элемент. Возможные значения:
  • auto – элемент будет занимать одну строку (по умолчанию);
  • span n – количество строк;
  • значение – номер строки, на которой должно закончиться отображение элемента.
Пример
grid-row
Определяет сразу два свойства grid-column-start и grid-column-end в формате:
grid-row: grid-row-start / grid-row-end;
Пример
justify-self
Переопределяет выравнивание, заданное по умолчанию или в justify-items, для конкретного grid-элемента. Возможные значения:
  • start – элемент прижимается к левому краю своей ячейки (по умолчанию);
  • end – элемент прижимается к правому краю своей ячейки;
  • center – элемент выравнивается по центру своей ячейки;
  • stretch – элемент растягивается, занимая всю ширину своей ячейки. Но если для элементов задана ширина, то значение stretch будет проигнорировано.
align-self
Переопределяет выравнивание, заданное по умолчанию или в align-items, для конкретного grid-элемента. Возможные значения:
  • start – элемент прижимается к верху своей ячейки;
  • end – элемент прижимается к низу своей ячейки;
  • center – элемент выравнивается по вертикальному центру своей ячейки;
  • stretch – элемент растягивается, занимая всю высоту ячейки (по умолчанию).

Единица измерения fr

В грид-разметке появилась новая единица измерения fr, которая представляет собой долю (fraction) доступного пространства в грид-контейнере (см. спецификацию). Единица fr берет 100% экрана и равномерно распределяет его между элементами сетки.

Рассмотрим несколько примеров с одинаковым кодом:

<style>
    .grid {
        display: grid;
    }
</style>
<div class="grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
}

и разными вариантами использования fr.

1. Столбцы с одинаковой шириной

Чтобы создать три одинаковые по ширине столбца, расширяющихся и сужающихся в соответствии с доступным пространством, надо всем им задать размер в 1fr.

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

РЕЗУЛЬТАТ:

1
2
3
4

2. Столбцы с разными размерами

Чтобы первый и третий столбец были в два раза уже среднего, надо разбить доступное пространство на 4 части, из которых две займет средний столбец, а два крайних - по одной части:

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

РЕЗУЛЬТАТ:

1
2
3
4

3. Сочетание разных единиц измерения

Можно сочетать fr с процентными и фиксированными значениями:

.grid {
    grid-template-columns: 100px 1fr 2fr 20%;
}

РЕЗУЛЬТАТ:

1
2
3
4

4. Функция repeat()

Чтобы повторить всю структуру столбцов или её часть, используют функцию repeat(), которая является укороченной формой записи. Таким образом, первый пример можно переписать так:

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

РЕЗУЛЬТАТ:

1
2
3
4

В следующем примере repeat() использована для части страктуры:

.grid {
    grid-template-columns: 50px repeat(2, 1fr) 50px;
}

РЕЗУЛЬТАТ:

1
2
3
4

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

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

РЕЗУЛЬТАТ:

1
2
3
4

5. Функция minmax()

Чтобы задать диапазон размеров, используют функцию minmax(), задавая минимальную и максимальную ширину столбца (или высоту строки). Как меняется ширина первого столбца, можно увидеть, меняя размер экрана браузера:

.grid {
    grid-template-columns: minmax(200px, 300px) repeat(3, 1fr);
}

РЕЗУЛЬТАТ:

1
2
3
4

Использование auto в качестве одного из параметров функции minmax() означает, что строка или столбец "растянется" до размера контента. Например, минимальная высота строки 100px, а максимальная равна высоте самой большой ячейки:

<style>
    .grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(100px, auto);
}
</style>
<div class="grid">
    <div>1</div>
    <div>2<br>Более<br>высокая<br>строка</div>
    <div>3</div>
    <div>4</div>
</div>

РЕЗУЛЬТАТ:

1
2
Более
высокая
строка
3
4

6. В качестве заключения...

Поддержка CSS Grid Layout осуществляется практически всеми современными браузерами.

Читать дальше: Фильтры


.