Шпаргалка по Grid
CSS Grid Layout или просто гриды — это удобная технология для раскладки элементов на веб-страницах. В отличие от флексбоксов, одновременно работающих только с одним измерением, размещая вложенные элементы в одном направлении, по горизонтали в виде столбиков, или по вертикали в виде строк. Grid позиционирует элементы сразу в двух направлениях, в виде строк и столбцов, образуя тем самым таблицу.
Принцип работы гридов чем-то похож на таблицы. Вместо работы только с рядами или только с колонками с помощью гридов можно работать с так называемыми грид-ячейками, позиционируя элементы по вертикали и горизонтали одновременно.
Основные термины
Грид-контейнер: родительский элемент, к которому применяется свойство display: grid .
Грид-элемент : дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.
Грид-линия : разделительная линия, формирующая структуру грида. Может быть как вертикальной грид-линия колонки , так и горизонтальной грид-линия ряда. Располагается по обе стороны от колонки или ряда. Используется для привязки грид-элементов:
Грид-ячейка : пространство между соседними грид-линиями, единица грид-сетки:
Грид-полоса : пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке:
Грид-область : область, ограниченная четырьмя грид-линиями. Может состоять из любого количества ячеек как по горизонтали, так и по вертикали:
Специальные функции и ключевые слова
Когда вы задаёте размеры колонкам и рядам, вам доступны не только давно известные единицы измерения px , vw , rem , % и так далее, но и очень крутые ключевые слова min-content , max-content , auto , fr .
Гриды подарили нам ещё одну волшебную функцию, позволяющую одновременно задавать минимальный и максимальный размер minmax() . Например, в случае записи grid-template-columns: minmax(200px, 1fr); колонка займёт 1 часть свободного пространства грид-контейнера, но не меньше 200 пикселей.
Ещё одна полезная функция, появившаяся в гридах, это repeat() . Сэкономит вам кучу лишних букв и времени.
Анимация свойств
Для анимации доступны следующие свойства и их значения:
- Значения свойств gap , row-gap , column-gap , указанные в единицах измерения, процентах или при помощи calc()
- Значения свойств grid-template-columns , grid-template-rows , указанные в единицах измерения, процентах или при помощи функции calc() при условии, что анимируются аналогичные значения
display (свойства грид-контейнера)
Свойство display со значением grid , делает элемент грид-контейнером. Дочерние элементы этого контейнера начинают подчиняться правилам грид-раскладки. Снаружи грид-контейнер ведёт себя как блок.
Свойство display со значением inline-grid , практически аналогичное предыдущему значению, за тем исключением, что снаружи грид-контейнер будет вести себя как строчный элемент.
Css grid направление колонок
Свойство grid-auto-flow
По умолчанию все элементы располагаются по порядку горизонтально, если места в строке больше нет, то элементы переносятся на следующую строку. Но с помощью свойства grid-auto-flow можно изменить направление элементов. Это свойство принимает два значения:
- row : значение по умолчанию, элементы располагаются в строку друг за другом, если места в строке не хватает, элементы переносятся на следующую строку
- column : элементы располагаются в столбик, если места в столбце не хватает, то элементы переходят в следующий столбец
* < box-sizing: border-box; >html, body < margin:0; padding:0; >.grid-container < height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: row; >.grid-item < text-align:center; font-size: 1.1em; padding: 1.5em; color: white; >.color1 .color2 .color3 .color4 .color5Grid Item 1Grid Item 2Grid Item 3Grid Item 4Grid Item 5Grid Item 6Grid Item 7
Свойство grid-auto-flow имеет значение row , поэтому элементы будут располагаться в строку.
Теперь изменим стиль grid-контейнера:
После этого элементы будут располагаться в столбец
Свойство order
Свойство order позволяет задать порядок элементов. По умолчанию для каждого элемента в гриде это свойство имеет значение 0. Поэтому элементы располагаются друг за другом как они определены в разметке html. Но мы можем переопределить этот порядок:
* < box-sizing: border-box; >html, body < margin:0; padding:0; >.grid-container < height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); >.grid-item < text-align:center; font-size: 1.1em; padding: 1.5em; color: white; >.last-item < order: 1; >.first-item < order: -1; >.color1 .color2 .color3 .color4 .color5Grid Item 1Grid Item 2Grid Item 3Grid Item 4Grid Item 5Grid Item 6Grid Item 7
Элементы с классом last-item имеет порядок 1, поэтому они будут располагаться после других элементов, у которых порядок равен 0 или меньше.
Если же необходимо поставить одни элементы перед другими, то можно использовать отрицательное значение для свойства order. Так, у седьмого элемента порядок равен -1, что меньше, чем у других элементов. Поэтому последний в разметке элемент по факту будет располагаться перед всеми элементами.
Направление и порядок элементов¶
По умолчанию все элементы располагаются по порядку горизонтально, если места в строке больше нет, то элементы переносятся на следующую строку. Но с помощью свойства grid-auto-flow можно изменить направление элементов. Это свойство принимает два значения:
- row : значение по умолчанию, элементы располагаются в строку друг за другом, если места в строке не хватает, элементы переносятся на следующую строку
- column : элементы располагаются в столбик, если места в столбце не хватает, то элементы переходят в следующий столбец
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
html> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width" /> title>Grid Layout в CSS3title> style> * box-sizing: border-box; > html, body margin: 0; padding: 0; > .grid-container height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: row; > .grid-item text-align: center; font-size: 1.1em; padding: 1.5em; color: white; > .color1 background-color: #675ba7; > .color2 background-color: #9bc850; > .color3 background-color: #a62e5c; > .color4 background-color: #2a9fbc; > .color5 background-color: #4e342e; > style> head> body> div class="grid-container"> div class="grid-item color1">Grid Item 1div> div class="grid-item color2">Grid Item 2div> div class="grid-item color3">Grid Item 3div> div class="grid-item color4">Grid Item 4div> div class="grid-item color1">Grid Item 5div> div class="grid-item color4">Grid Item 6div> div class="grid-item color5">Grid Item 7div> div> body> html> Свойство grid-auto-flow имеет значение row , поэтому элементы будут располагаться в строку.
Теперь изменим стиль grid-контейнера:
.grid-container height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); grid-auto-flow: column; > После этого элементы будут располагаться в столбец
Свойство order¶
Свойство order позволяет задать порядок элементов. По умолчанию для каждого элемента в гриде это свойство имеет значение 0 . Поэтому элементы располагаются друг за другом как они определены в разметке html. Но мы можем переопределить этот порядок:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
html> head> meta charset="utf-8" /> meta name="viewport" content="width=device-width" /> title>Grid Layout в CSS3title> style> * box-sizing: border-box; > html, body margin: 0; padding: 0; > .grid-container height: 100vh; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); > .grid-item text-align: center; font-size: 1.1em; padding: 1.5em; color: white; > .last-item order: 1; > .first-item order: -1; > .color1 background-color: #675ba7; > .color2 background-color: #9bc850; > .color3 background-color: #a62e5c; > .color4 background-color: #2a9fbc; > .color5 background-color: #4e342e; > style> head> body> div class="grid-container"> div class="grid-item color1">Grid Item 1div> div class="grid-item color2 last-item"> Grid Item 2 div> div class="grid-item color3 last-item"> Grid Item 3 div> div class="grid-item color4">Grid Item 4div> div class="grid-item color1">Grid Item 5div> div class="grid-item color4">Grid Item 6div> div class="grid-item color5 first-item"> Grid Item 7 div> div> body> html> 
Элементы с классом last-item имеет порядок 1 , поэтому они будут располагаться после других элементов, у которых порядок равен 0 или меньше.
Если же необходимо поставить одни элементы перед другими, то можно использовать отрицательное значение для свойства order . Так, у седьмого элемента порядок равен -1 , что меньше, чем у других элементов. Поэтому последний в разметке элемент по факту будет располагаться перед всеми элементами.