Памятка по гридам

CSS Grid Layout

<div class="grid-container">
	<div class="grid-element">1</div>
	<div class="grid-element">2</div>
	<div class="grid-element">3</div>
</div>

Свойства грид-контейнера

display: grid

Назначает элемент грид-контейнером, а его дочерние элементы становятся грид-элементами.

display: grid | inline-grid | subgrid;

display: grid;

display: inline-grid;

display: subgrid;

grid-template-rows, grid-template-columns, grid-template

Задают количество и размеры строк и колонок грид-сетки.

grid-template: grid-template-rows / grid-template-columns;

grid-template-rows: repeat(2,1fr);
grid-template-columns: 40px auto min-content max-content 1fr;
grid-template: repeat(2,1fr) / repeat(3,1fr);

grid-template-areas

Наглядные именованные области и расположения элементов грид-контейнера.

grid-template-areas: "name name" ". name-2";

grid-template-areas:
"header header header"
"sidebar content ."
"footer footer footer";

grid-auto-rows, grid-auto-columns

Неявные автозаполнения сетки, когда не задано grid-template, или элементов становится больше чем там указано.

grid-auto-rows: 100px; grid-auto-columns: 50px;

display: grid;
grid-template-columns: 50px 150px;
grid-auto-columns: 15px 25px 5px;
grid-auto-flow: column;

grid-auto-flow

Направление куда будут добавляться дополнительные элементы.

grid-auto-flow: row (default?) | column | dense;

grid-auto-flow: column;

grid-auto-flow: column dense;

grid

Мегасвойство, в котором можно задать от 2-х до 6-ти свойств.

grid: grid-template-rows / grid-template-columns / grid-template-areas / grid-auto-rows / grid-auto-columns / grid-auto-flow.

grid: 200px 100px / auto-flow 30%;

grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;

row-gap, column-gap, gap

Отступы между рядами и колонками.

gap: row-gap column-gap;

row-gap: 0 (default) | 25px | 7%;
column-gap: 0 (default) | 15px | 5%;
gap: 0 (default) | 25px 15px | 7% 5%;

Свойства для выравнивания

align-items

Выравнивает грид-элементы по вертикали.

align-items: auto (stretch default) | start | center | end | stretch;

justify-items

Выравнивает грид-элементы по горизонтали.

justify-items: auto (default) | start | center | end | stretch;

place-items

Сокращённая запись align-items и justify-items.

place-items: auto (default) | start | center | end | stretch;

place-items: auto end;

align-content

Выравнивает всю сетку грид-контейнера по вертикали.

justify-content

Выравнивает всю сетку грид-контейнера по горизонтали.

place-content

Сокращённая запись align-content и justify-content.

Экспериментальные свойства

masonry-auto-flow

Изменяет способ размещения элементов при grid-template-rows: masonry.

masonry-auto-flow: pack | next | ordered | definite-first;

grid-template-rows: masonry;
masonry-auto-flow: next ordered;

align-tracks

Задаёт выравнивание в masonry-сетке.

justify-tracks

Задаёт выравнивание в masonry-сетке.

Свойства грид-элемента

grid-row-start, grid-column-start, grid-row-end, grid-column-end

Указывает места расположения грид-элементов в контейнере.

grid-row-start: auto | 1 | col 1 | row1-start | row 3 | span 4;

grid-row, grid-column

Сокращённые свойства для grid-row-start, grid-row-end и grid-column-start, grid-column-end .

grid-row: grid-row-start / grid-row-end; grid-column: grid-column-start / grid-column-end

grid-column: 2 / span 3;

grid-area

Указывает места расположения грид-элементов в контейнере, включая именованные записи grid-template-areas.

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

grid-area: 1 / 2 / 4 / 3;
grid-area: auto;

order

Меняет порядок расположения элемента.

order: -1 | 0 | 3;

align-self

Выравнивает содержимое грид-элемента по вертикали (аналогично align-items, перезаписывает его).

align-self: auto (default) | start | center | end | stretch;

justify-self

Выравнивает содержимое грид-элемента по горизонтали (аналогично justify-items, перезаписывает его).

justify-self: auto (default) | start | center | end | stretch;

place-self

Сокращение для align-self и justify-self .

place-self: auto (default) | stretch | start | center | end;

Единицы значений в гридах

1fr — свободное пространство делится на указанное количество частей.

minmax() — функция задаёт минимальный и максимальный размер. Примеры: minmax (200px, 1fr); minmax (min-content, 3fr);

auto –

min-content –

max-content –

repeat() — функция задаёт количество повторений и размер. Примеры: grid-template-columns: 80px repeat (2, 40px 1fr); repeat (auto-fit, minmax (250px, 1fr));

auto-fit –

auto-fill — заставляет элементы (карточки) повторяться такое количество раз, пока они не заполнят контейнер.

fit-content(10%) –?. Примеры: fit-content (200px | 5 cm | 30vw | 100ch | 40%)

Примеры применения

Отцентрировать блок

Самый простой способ отцентрировать блок по вертикали и горизонтали.

Набери текст

<div class="grid">
	<div class="grid-element">Набери текст</div>
</div>

.grid {
	display: grid;
	place-content: center;
	height: 100%;
}

Хедер + Мейн + Футер

Мейн прижимает футер к низу страницы, даже если на странице мало контента.

Header

Main

Footer

<div class="grid">
	<div class="grid-element">Header</div>
	<div class="grid-element">Main</div>
	<div class="grid-element">Footer</div>
</div>

.grid {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
}

Адаптивная галерея.

Базовая галерея с адаптивными резиновыми карточками.

Card 1

Card 2 Card 2

Card 3 Card 3 Card 3

<div class="grid">
	<div class="grid-element">Card 1</div>
	<div class="grid-element">Card 2</div>
	<div class="grid-element">Card 3</div>
</div>

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 10px 18px;
}

3 июня 2021 1 сентября 2023

Олег Миторун Фото Олег Миторун