Шпаргалка по гридам (CSS Grid Layout)

HTML:

<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 | inline-grid | subgrid;

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



Свойства для количества и размеров строк и колонок:

grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

Мегасвойство, объединяющее grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-flow, grid-auto-rows и grid-auto-columns.



grid-template-rows: 1fr minmax(50px,50%); grid-template-columns: 10px minmax(100px,110%) auto;
или grid-template: 1fr minmax(50px,50%) / 10px minmax(100px,110%) auto;

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



grid-template-rows: repeat(2,1fr); grid-template-columns: repeat(3,1fr);
или grid-template: repeat(2,1fr) / repeat(3,1fr);

Сокращенный вариант задать одинаковые количество и размеры строк и колонок.



Контейнер: grid-template-areas: 'header header' 'sidebar content' 'footer footer';
Элементы: grid-area: header; grid-area: sidebar; grid-area: footer;

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



grid-auto-rows: 100px; grid-auto-columns: 50px; grid-auto-flow: row | column | dense;

Разные варианты неявного автозаполнения сетки, когда не задано grid-template, или элементов становится больше чем там указано. grid-auto-flow: column; – меняет направление расположения(?) грид-элементов (второй элемент идет не справа от первого, а вниз на втором ряду и т.д.), при добавлении еще грид-элементов они будут добавляться не вниз, а вбок, по горизонтали.



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

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



Значения:

10px | 50% | auto | 1fr | auto-fill | auto-fit | minmax(50px,50%) | min-content | max-content | repeat(5, 20%) ;

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



Свойства для выравнивания ячеек:

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

Выравнивает все элементы внутри ячеек-карточек поперек строки (по вертикали).



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

Выравнивает все элементы внутри ячеек-карточек вдоль строки (по горизонтали).



place-items: auto end;

Сокращенная запись place-items: align-items justify-items;.



align-content: start (default) | center | end | stretch | space-between | space-around | space-evenly;

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



justify-content: start (default) | center | end | stretch | space-between | space-around | space-evenly;

Выравнивает всю сетку грид-контейнера (все грид-элементы вместе будто это один элемент) вдоль строки (по горизонтали).



place-content: center stretch;

Сокращенная запись place-content: align-content justify-content;.



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

grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 6;
или grid-row: 2 / 3; grid-column: 5 / 6;
или grid-area: 2 / 5 / 3 / 6;

Указывает места расположения грид-элементов в контейнере (по линиям-границам). Значения: 1 | col1 | row3 | span4; .



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

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



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

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



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

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



order: -1 | 0 | 3;

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








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

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

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

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

.grid {
display: grid;
place-items: 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;
}





Автор: Олег Миторун