Источники:
https://doka.guide/css/grid-guide/
https://habr.com/ru/companies/macloud/articles/564182/
https://webformyself.com/min-content-max-content-i-fit-content-v-css/
https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
https://habr.com/ru/companies/ruvds/articles/529830/
Содержание:
1. Что такое гриды?
2. Как же Грид работает?
3. Основные термины
4. Схема CSS Grids
5. display: grid;
6. grid-template-columns, grid-template-rows
6.1. repeat()
6.2. fr
7. grid-auto-columns, grid-auto-rows
7.1. grid-auto-flow
8. grid-template-areas
9. grid-template
10. row-gap, column-gap
10.1. gap
11. justify-content
12. justify-items
13. justify-self
14. align-items
15. align-self
16. place-items
16.1. place-self
17. grid
17.1. auto-flow
18. grid-column-start, grid-column-end, grid-row-start, grid-row-end
19. grid-column, grid-row
20. grid-area
21. min-content, max-content, fit-content
22. Функция fit-content()
23. Функция minmax()
24. auto-fit и auto-fill
25. order
1. Что такое гриды?
CSS Grid Layout (спецификация) или просто гриды — это удобная технология для раскладки элементов на веб-страницах. В отличие от флексбоксов, одновременно работающих только с одним измерением, гриды дают возможность работать одновременно с двумя: горизонталью и вертикалью.
2. Как же Грид работает?
Элементы Грида (grid items) располагаются вдоль главной или основной (main) и поперечной (cross) оси (axis). При помощи различных свойств мы можем манипулировать элементами для создания макетов. Чем то похоже на таблицу Excel - также можно объединять ячейки, строки, колонки.
3. Основные термины
Грид-контейнер: родительский элемент, к которому применяется свойство display: grid.
Грид-элемент: дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.
Грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда). Располагается по обе стороны от колонки или ряда. Используется для привязки грид-элементов.
Грид-ячейка: пространство между соседними грид-линиями. Единица грид-сетки.
Грид-полоса: пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке.
Грид-область: область, ограниченная четырьмя грид-линиями. Может состоять из любого количества ячеек как по горизонтали, так и по вертикали.
4. Схема CSS Grid
Схема содержит все возможные свойства, предоставляемые Гридом. Эти свойства делятся на:
- родительские
- дочерние
4.1. Родительские свойства грид-контейнера:
4.2. Дочерние свойства грид-контейнера:
5. display: grid;
Если элементу задано свойство display со значением grid, то такой элемент становится грид-контейнером. Дочерние элементы этого контейнера начинают подчиняться правилам грид-раскладки. Снаружи грид-контейнер ведёт себя как блок.
display: inline-grid; - практически аналогичное предыдущему значению — за тем исключением, что снаружи грид-контейнер, созданный с помощью inline-grid, будет вести себя как строчный элемент.
6. grid-template-columns, grid-template-rows
Свойства, задающие размеры и количество колонок или рядов грид-раскладки соответственно.
.container {
display: grid;
/* Будет создано 3 колонки */
grid-template-columns: 150px auto 40%;
/* Будет создано 3 ряда */
grid-template-rows: 250px 10vw 15rem;
}
Можно явно именовать грид-линии, используя для этого квадратные скобки:
.container {
display: grid;
grid-template-columns: [start] 250px [line2] 400px [line3] 600px [end];
grid-template-rows: [row1-start] 15rem [row1-end] 30vh [last];
}
Каждая линия может иметь больше одного имени. Это чем-то похоже на классы в HTML — вы можете задать элементу больше одного класса. Тут аналогичная ситуация. Например, такой код будет совершенно валиден, у второй и третьей грид-линий колонки по два имени:
.container {
display: grid;
grid-template-columns: [start] 140px [line2 col2-start] 250px [col2-end end];
grid-template-rows: [row1-start] 25rem [row1-end] 10vh [last];
}
6.1. repeat()
Если нужны одинаковые колонки или ряды, то пользуемся этой функцией.
Пример: будет создано 3 колонки по 250 пикселей:
.container {
display: grid;
grid-template-columns: repeat(3, 250px);
}
6.2. fr
fr (от fraction — доля, часть) отвечает за свободное пространство внутри грид-контейнера.
Например, этот код создаст три колонки, каждая из которых будет занимать 1/3 ширины родителя:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Что аналогично записи:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Свободное пространство рассчитывается после того, как место отдано всем фиксированным размерам.
Например: grid-template-columns: 1fr 200px 1fr;
в коде сначала будет создана колонка шириной 200 пикселей, а затем свободное пространство — ширина родителя минус 200 пикселей — будет поделено между остальными колонками. Каждая будет занимать ширину (100% - 200px) / 2
7. grid-auto-columns, grid-auto-rows
Если элементов внутри грид-контейнера больше, чем может поместиться в заданные явно ряды и колонки, то для них создаются автоматические, неявные ряды и колонки. При помощи свойств grid-auto-columns и grid-auto-rows можно управлять размерами этих автоматических рядов и колонок.
.container {
display: grid;
grid-template-rows: 50px 140px;
grid-auto-rows: 40px;
gap: 20px;
}
В этом примере создаются два явных ряда размером 50 и 140 пикселей. Элементы, начиная с третьего, в эти два ряда не помещаются, и для них создаются автоматические ряды. При помощи свойства grid-auto-rows мы указываем, что автоматические ряды должны иметь размер 40 пикселей.
Можно задавать больше одного значения для автоматических колонок или рядов. Тогда паттерн размера будет повторяться до тех пор, пока не кончатся грид-элементы.
.container {
display: grid;
grid-template-columns: 200px 500px;
grid-auto-columns: 75px 100px 50px;
grid-auto-flow: column;
gap: 20px;
}
7.1. grid-auto-flow
Если грид-элементов больше, чем явно объявленных колонок или рядов, то они автоматически размещаются внутри родителя. А вот каким образом — в ряд или в колонку — можно указать при помощи свойства grid-auto-flow. По умолчанию значение у этого свойства row, лишние элементы будут выстраиваться в ряды в рамках явно заданных колонок.
Возможные значения:
- row (значение по умолчанию) — автоматически размещаемые элементы выстраиваются в ряды.
- column — автоматически размещаемые элементы выстраиваются в колонки.
- dense — браузер старается заполнить дырки (пустые ячейки) в разметке, если размеры элементов позволяют. Можно сочетать с остальными значениями.
Принципы работы этого свойства удобнее всего изучать на примере, когда есть большой блок, который не помещается в одну грид-ячейку.
.container {
display: grid;
/* Три колонки */
grid-template-columns: auto auto auto;
/* Два ряда */
grid-template-rows: auto auto;
/* Автоматическое размещение в ряд */
grid-auto-flow: row;
/* Отступы между ячейками */
gap: 20px; }
.item3 {
/* Занимает один ряд и растягивается на две колонки */
grid-column: span 2;
}
Добавим к значению свойства grid-auto-flow слово dense:
.container {
/* Автоматическое размещение в ряд */
grid-auto-flow: row dense;
}
Чтобы изменить порядок размещения элементов в грид-контейнере (с горизонтального на вертикальный) применим
grid-auto-flow: column;
8. grid-template-areas
Позволяет задать шаблон сетки расположения элементов внутри грид-контейнера. Имена областей задаются при помощи свойства grid-area. Текущее свойство grid-template-areas просто указывает, где должны располагаться эти грид-области.
Возможные значения:
- none (значение по умолчанию) — области сетки не задано имя.
- . — означает пустую ячейку.
- название — название области, может быть абсолютно любым словом или даже эмодзи! 🤯
Обратите внимание, что нужно называть каждую из ячеек. Например, если шапка или подвал нашего сайта будут занимать все три существующие колонки, то нужно будет трижды написать названия этих областей. Удобнее всего будет подписывать области в виде некой таблицы. Подобный способ записи чем-то похож на таблицы в Markdown:
.container {
display: grid;
grid-template-columns: repeat(3, 500px);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
"header header header"
"content content 👾"
"content content ."
"footer footer footer";
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: content;
}
.item3 {
grid-area: 👾;
}
.item4 {
grid-area: footer;
}
Обратите внимание, что между строками не ставятся запятые или какие-то другие символы, имена разделяются пробелами.
Получится такая раскладка:
9. grid-template
Свойство-шорткат для свойств grid-template-rows, grid-template-columns. Позволяет записать все значения в одну строку. Главное после этого не запутаться при чтении 😅
Можно прописать все колонки и ряды сразу, разделяя их слэшем /. Сперва идут ряды, а затем колонки, не перепутайте!
.container {
display: grid;
grid-template: repeat(4, 1fr) / repeat(3, 500px);
}
10. row-gap, column-gap
Задают отступы между рядами или колонками.
.container {
display: grid;
grid-template-columns: 1fr 350px 1fr;
grid-template-rows: repeat(3, 150px);
/* Отступы между рядами */
row-gap: 50px;
/* Отступы между колонками */
column-gap: 20px;
}
10.1. gap
Шорткат для записи значений свойств row-gap и column-gap. Значения разделяются пробелом:
.container {
display: grid;
grid-template-columns: 1fr 350px 1fr;
grid-template-rows: repeat(3, 150px);
gap: 50px 20px;
}
11. justify-content
Свойство, с помощью которого можно выровнять элементы вдоль оси строки. Данное свойство работает, только если общая ширина столбцов меньше ширины контейнера сетки. Другими словами, вам нужно свободное пространство вдоль оси строки контейнера, чтобы выровнять его столбцы слева или справа.
Возможные значения:
start — выравнивает сетку по левой стороне грид-контейнера.
end — выравнивает сетку по правой стороне грид-контейнера.
center — выравнивает сетку по центру грид-контейнера.
stretch — масштабирует элементы, чтобы сетка могла заполнить всю ширину грид-контейнера.
space-around — одинаковое пространство между элементами и полуразмерные отступы по краям.
space-evenly — одинаковое пространство между элементами и полноразмерные отступы по краям.
space-between — одинаковое пространство между элементами без отступов по краям.
12. justify-items
Свойство, с помощью которого задаётся выравнивание грид-элементов по горизонтальной оси. Применяется ко всем элементам внутри грид-родителя.
Возможные значения:
start — выравнивает элемент по начальной (левой для LTR) линии.
end — выравнивает элемент по конечной (правой для LTR) линии.
center — выравнивает элемент по центру грид-ячейки.
stretch — растягивает элемент на всю ширину грид-ячейки.
13. justify-self
Тоже что и justify-items, только для одной ячейки
14. align-items
Свойство, с помощью которого можно выровнять элементы по вертикальной оси внутри грид-контейнера.
Возможные значения:
start — выравнивает элемент по начальной (верхней) линии.
end — выравнивает элемент по конечной (нижней) линии.
center — выравнивает элемент по центру грид-ячейки.
stretch — растягивает элемент на всю высоту грид-ячейки.
15. align-self
Тоже что и align-items, только для одной ячейки
16. place-items
Шорткат для указания значений сразу и для align-items и для justify-items. Указывать нужно именно в таком порядке.
.container {
display: grid;
place-items: stretch end;
}
16.1. place-self
Шорткат для указания значений сразу и для align-self и для justify-self. Указывать нужно именно в таком порядке.
17. grid
Мегашорткат, позволяющий задать значения всему и сразу. А конкретно с его помощью можно указать значения для следующих свойств:
- grid-template-rows;
- grid-template-columns;
- grid-template-areas;
- grid-auto-rows;
- grid-auto-columns;
- grid-auto-flow.
Перед тем как соблазниться возможностью расписать всё в одном свойстве, дважды (а то и трижды) подумайте о читабельности кода. Учтите и то, что гриды относительно новая и не такая уж простая технология. Не каждый коллега сможет прочесть этот шорткат.
Возможные значения:
none — значение по умолчанию. Это ключевое слово сбрасывает значения для всех свойств, входящих в этот шорткат.
.container {
display: grid;
grid: none;
}
Можно указать допустимые значения для шортката grid-template:
.container {
display: grid;
grid: repeat(4, 150px) / 1fr 200px 1fr;
}
Можно задать размеры колонок и рядов. Создадим два ряда и две колонки:
.container {
display: grid;
grid: 200px 100px / 30% 30%;
}
17.1. auto-flow
auto-flow — это ключевое слово даёт браузеру понять, что создавать при необходимости: колонки или ряды.
Если auto-flow стоит справа от слэша, то будут создаваться автоматические колонки:
.container {
display: grid;
grid: 200px 100px / auto-flow 30%;
}
Если auto-flow стоит слева от слэша, то будут создаваться автоматические ряды:
.container {
display: grid;
grid: auto-flow 30% / 200px 100px;
}
dense — к ключевому слову auto-flow можно добавить dense. Это укажет браузеру, что элементы должны стараться заполнить свободные ячейки.
Важно ставить это слово сразу после auto-flow
.container {
display: grid;
grid: auto-flow dense 30% / 200px 100px;
}
18. grid-column-start, grid-column-end, grid-row-start, grid-row-end
Определяют положение элемента внутри грид-сетки при помощи указания на конкретные направляющие линии.
Возможные значения:
- название или номер линии — может быть порядковым номером или названием конкретной линии.
- span число — элемент растянется на указанное количество ячеек.
- span имя — элемент будет растягиваться до следующей указанной линии.
- auto — означает автоматическое размещение, автоматический диапазон клеток или дефолтное растягивание элемента, равное одному.
.container {
display: grid;
grid-template-columns: [one] 1fr [two] 1fr [three] 1fr [four] 1fr [five] 1fr [six];
grid-template-rows: [row1-start] 1fr [row1-end] 1fr 1fr;
}
.item1 {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}
.container {
display: grid;
grid-template-columns: [first] 1fr [line2] 1fr [line3] 1fr [col4-start] 1fr [five] 1fr [end];
grid-template-rows: [row1-start] 1fr [row1-end] 1fr [third-line] 1fr [last-line];
}
.item1 {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
Если не указать значения для свойств grid-column-end и grid-row-end, то элемент по умолчанию будет размером в одну грид-ячейку.
Элементы могут перекрывать друг друга, накладываться друг на друга. Можно использовать свойство z-index для управления контекстом наложения.
19. grid-column, grid-row
Свойства-шорткаты для grid-column-start, grid-column-end и grid-row-start, grid-row-end соответственно.
Значения для *-start и *-end разделяются слэшем.
Можно использовать ключевое слово span, буквально говорящее «растянись на столько-то». А на сколько, указывает стоящая за ним цифра.
.item1 {
grid-column: 3 / span 2;
grid-row: 3 / 4;
}
Если опустить слэш и второе значение, то элемент будет размером в одну ячейку.
20. grid-area
Двуличное свойство 🧐, которое может как указывать элементу, какую из именованных областей ему нужно занять, так и служить шорткатом для одновременного указания значений для четырёх свойств: grid-column-start, grid-column-end, grid-row-start и grid-row-end.
Пример с указанием на именованную область:
.item1 {
/* Займёт область content внутри грид-сетки */
grid-area: content;
}
А теперь пример с указанием всех четырёх значений в строку. При таком указании значений есть скользкое место: значения указываются в таком порядке: row-start / column-start / row-end / column-end, то есть сначала указываем оба начала, а потом оба конца.
.item2 {
grid-area: 1 / col4-start / last-line / 6;
}
21. min-content, max-content, fit-content
min-content — это наименьший размер, который может принимать блок, не переполняя его содержимое. Для горизонтального содержимого min-content использует длину самой широкой части содержимого в блоке элемента и автоматически устанавливает значение его длины как ширину блока. Контент в этом случае включает текст и ресурсы, такие как изображения и видео.
.grid {
display: grid;
grid-template-rows: min-content auto min-content;
height: 100vh;
}
max-content представляет собой идеальный размер блока по заданной оси при бесконечно доступном пространстве. Другими словами, max-content представляет размер, в который блок должен поместить все содержимое без упаковки, иначе блок будет переполнен.
.container {
display: grid;
grid-template-columns: 1fr max-content max-content;
/* ... */
}
Нежелательный эффект от max-content
max-content, как мы узнали, довольно хорошо работает для бесконечно доступного пространства, где элемент коробки может вмещать все свое содержимое без упаковки и переполнения родительского контейнера.
Однако в случае, когда родительский элемент или элемент наследник не может вместить размер элемента коробки, то мы получим переполнение:
fit-content
В зависимости от размера элемента контейнера, при применении fit-content к элементу коробки внутри контейнера, коробка использует либо максимальный размер содержимого, либо минимальный размер содержимого, либо доступный контейнер в качестве идеального размера.
При наличии бесконечно доступного пространства max-content определяет идеальный размер элемента коробки. Однако, когда область просмотра более узкая, доступное пространство становится размером с блок, чтобы предотвратить переполнение до тех пор, пока блок использует min-content. Если мы вернемся к нашему примеру, применив fit-content к элементу коробки, мы получим следующее:
.item1 {
width: -moz-fit-content;
width: fit-content;
/* ... */
}
поле использует доступное пространство, но никогда не расширяется за пределы max-content, а когда область просмотра сужается, поле никогда не выходит за пределы min-content.
22. Функция fit-content()
функция fit-content() позволяет разработчикам определять максимально допустимую ширину для размера элемента. Эта функция CSS часто определяет размер столбцов и строк сетки, используя grid-template-columns и grid-template-rows соответственно. Функция fit-content() принимает в качестве аргумента процент или единицу длины:
fit-content(percentage | length)
Подобно ключевому слову fit-content, при присвоении значения функции для определения размера в макете сетки она использует указанный аргумент в качестве максимально допустимого размера поля, при этом гарантируя, что поле никогда не выходит за пределы max-content. Давайте рассмотрим структуру макета сетки и применим fit-content() к столбцу сетки:
.container {
display: grid;
grid-template-columns: fit-content(200px) fit-content(250px) auto;
/* ... */
}
23. Функция minmax()
Определяет диапазон размеров, больший или равный min и меньший или равный max
grid-template-columns: minmax(20px, auto) 1fr 1fr;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-columns: minmax(2ch, 10ch) 1fr 1fr;
Пример:
#container {
display: grid;
grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px;
grid-gap: 5px;
box-sizing: border-box;
height: 200px;
width: 100%;
background-color: #8cffa0;
padding: 10px;
}
#container > div {
background-color: #8ca0ff;
padding: 5px;
}
Варианты синтаксиса:
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
minmax(min-content, max-content)
Варианты с примером:
grid-template-columns:minmax(auto,auto) minmax(auto,auto);
grid-template-columns:minmax(min-content,max-content) minmax(min-content,max-content);
grid-template-columns:minmax(auto,40%) minmax(auto,40%);
grid-template-columns:minmax(min-content,40%) minmax(min-content,40%);
grid-template-columns:minmax(30%,max-content) minmax(30%,max-content)
grid-template-columns:minmax(30%,auto) minmax(30%,auto);
24. auto-fit и auto-fill
Для того чтобы справиться с проблемой жёсткой настройки количества столбцов сеточного макета, мы можем воспользоваться возможностями ключевых слов auto-fit и auto-fill. При этом надо отметить, что между ними существует довольно-таки тонкое различие.
Так, при использовании auto-fit и при наличии свободного места элементы сетки будут растянуты. А применение auto-fill приводит к тому, что элементы растягиваться не будут. В результате дополнительное свободное пространство окажется незанятым, ширина элементов меняться не будет.
При использовании этих ключевых слов может получиться один и тот же результат. Это зависит от ширины области просмотра страницы. Но при определённой ширине области просмотра различия между ними будут уже вполне заметными.
Еще один пример, который сильно сокращает код:
Этот код аналогичен вот этому:
В основе этого способа лежит идея, в соответствии с которой grid-template-columns устанавливается в 1fr. А когда ширина области просмотра достаточно велика — применяется minmax()
Первый пример заключается в использовании CSS-функций сравнения.
Вот что здесь происходит:
- Если ширина области просмотра меньше, чем 250px, первым значением, передаваемым minmax(), будет 100% ширины родительского элемента.
- Если ширина области просмотра будет больше, чем 250px, тогда первым значением minmax() будет 250px.
25. order
Свойство order позволяет задать порядок элементов.
По умолчанию для каждого элемента в гриде это свойство имеет значение 0. Поэтому элементы располагаются друг за другом как они определены в разметке html. Но мы можем переопределить этот порядок:
.last-item{
order: 1;
}
.first-item{
order: -1;
}
Элементы с классом last-item имеет порядок 1, поэтому они будут располагаться после других элементов, у которых порядок равен 0 или меньше.
Если же необходимо поставить одни элементы перед другими, то можно использовать отрицательное значение для свойства order. Так, у седьмого элемента порядок равен -1, что меньше, чем у других элементов. Поэтому последний в разметке элемент по факту будет располагаться перед всеми элементами.