Памятка по Грид (Grid)
Свойства грид-контейнера
<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, grid-template-rows, grid-template-columns
Задают количество и размеры строк и колонок грид-сетки.
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;
gap, row-gap, column-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
Выравнивает всю сетку грид-контейнера по вертикали.
align-content: start | center | end | stretch | space-between | space-around | space-evenly;
justify-content
Выравнивает всю сетку грид-контейнера по горизонтали.
justify-content: start (default) | center | end | stretch | space-between | space-around | space-evenly;
place-content
Сокращённая запись align-content и justify-content.
place-content: start (default) | center | end | stretch | space-between | space-around | space-evenly;
Экспериментальные свойства
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-сетке.
align-tracks: normal | start | center | end | stretch | space-between | space-around | space-evenly;
justify-tracks
Задаёт выравнивание в masonry-сетке.
justify-tracks: normal | start | left | center | end | right | stretch | space-between | space-around | space-evenly;
Свойства грид-элемента
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 | 5cm | 30vw | 100ch | 40%)
Примеры применения
Отцентрировать блок
Самый простой способ отцентрировать блок по вертикали и горизонтали.
<div class="grid">
<div class="grid-element">Набери текст</div>
</div>
.grid {
display: grid;
place-content: center;
height: 100%;
}
Прижать футер к низу страницы
Мейн прижимает футер к низу страницы когда на странице мало контента.
<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%;
}
Адаптивная галерея
Базовая галерея с адаптивными резиновыми карточками.
<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(min(130px, 100%), 1fr));
gap: 10px 18px;
}