CSS Grid – это мощный инструмент для создания сеток для расположения элементов на веб-странице. Появилась она в CSS3 и дала разработчикам возможность создавать более гибкие и адаптивные макеты приложений. В этой статье мы рассмотрим все свойства и значения в CSS Grid.
Важные термины CSS Grid
Прежде чем погружаться в концепции Grid, важно понимать терминологию.
Grid Container
Это элемент, на котором применяется display: grid. Он является прямым родителем всех элементов сетки. В этом примере .container является контейнером grid:
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
</div>Grid Item
Дочерние элементы (т.е. прямые потомки) контейнера grid. Здесь элементы .item являются элементами grid, но sub-item не является таковым:
<div class="container">
<div class="item"></div>
<div class="item">
<div class="sub-item "></div>
</div>
<div class="item"></div>
</div>Grid Line
Разделяющие линии, составляющие структуру сетки. Они могут быть вертикальными (линии сетки столбцов) или горизонтальными (линии сетки строк) и располагаются с обеих сторон строки или столбца. Здесь желтая линия является примером линии сетки столбцов:
Grid Cell
Пространство между двумя смежными линиями сетки строки и двумя смежными линиями сетки столбца. Это "единица" сетки. Здесь ячейка сетки между линиями сетки строк 1 и 2 и линиями сетки столбцов 2 и 3:
Grid Track
Пространство между двумя смежными линиями сетки. Можно думать о них как о колонках или строках сетки. Вот трек сетки между второй и третьей линиями сетки строк:
Grid Area
Полное пространство, ограниченное четырьмя линиями сетки. Область сетки может состоять из любого количества ячеек сетки. Вот область сетки между линиями сетки строк 1 и 3 и линиями сетки столбцов 1 и 3:
Свойства для родительского элемента
CSS Grid свойство: display
Определяет элемент как контейнер grid и устанавливает новый контекст форматирования сетки для его содержимого.
.container {
display: grid | inline-grid;
}CSS Grid свойства: grid-template-columns, grid-template-rows
Свойства grid-template-columns и grid-template-rows определяют структуру сетки, задавая ее колонки и строки. Они принимают список значений, разделенных пробелом, где каждое значение представляет размер трека. Размер может быть задан в пикселях, процентах или fr-единицах (доля свободного пространства в сетке - фракция).
Пример использования grid-template-columns:
.container {
display: grid;
grid-template-columns: 100px 200px 1fr;
}Этот код определяет сетку с тремя колонками: первая имеет ширину 100 пикселей, вторая – 200 пикселей, а третья занимает все оставшееся свободное место.
Пример использования grid-template-rows:
.container {
display: grid;
grid-template-rows: 50px 100px;
}Этот код определяет сетку с двумя строками: первая имеет высоту 50 пикселей, а вторая – 100 пикселей.
grid-template-columns и grid-template-rows определяют столбцы и строки сетки с помощью списка значений, разделенных пробелами. Значения представляют размер дорожки, а пространство между ними представляет линию сетки.
.container {
grid-template-columns: ... ...;
/* e.g.
1fr 1fr
minmax(10px, 1fr) 3fr
repeat(5, 1fr)
50px auto 100px 1fr
*/
grid-template-rows: ... ...;
/* e.g.
min-content 1fr min-content
100px 1fr max-content
*/
}Линии сетки автоматически получают положительные номера из заданных значений (при этом -1 является альтернативой для самой последней строки).
Однако вы можете сами называть линии. Обратите внимание на синтаксис квадратных скобок для имен линий:
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
Обратите внимание, что линия может иметь более одного имени. Например, в этом случае у второй линии будет два имени: row1-end и row2-start:
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}Если ваше значение содержит повторяющиеся части, вы можете использовать запись repeat(), чтобы упростить код:
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}Что эквивалентно этому:
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}Если несколько строк имеют одно и то же имя, на них можно ссылаться по имени строки и количеству.
.item {
grid-column-start: col-start 2;
}Единица измерения fr позволяет задавать размер дорожки как долю свободного пространства контейнера grid. Например, этот код установит каждый элемент на треть ширины контейнера grid:
.container {
grid-template-columns: 1fr 1fr 1fr;
}Свободное пространство для fr-единиц рассчитывается после всех не гибких элементов. В этом примере общее количество свободного пространства, доступного для fr-единиц, не включает 50 пикселей:
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}CSS Grid свойство: grid-template-areas
Свойство grid-template-areas позволяет определить шаблон сетки, используя имена областей сетки, которые определяются с помощью свойства grid-area. Повторение имени области приводит к тому, что содержимое распространяется на эти ячейки. Точка означает пустую ячейку. Синтаксис свойства предоставляет визуализацию структуры сетки.
.container {
grid-template-areas:
"grid-area-name | . | none | ..."
"...";
}Пример:
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.container {
display: grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: auto;
grid-template-areas:
"header header header header"
"main main . sidebar"
"footer footer footer footer";
}Этот код создаст сетку размером 4 колонки на 3 строки. Верхняя строка будет состоять из области заголовка (header). Средняя строка будет состоять из двух главных областей (main), одной пустой ячейки и одной боковой области (sidebar). Последняя строка – это только подвал (footer). Для этого будет использована функция grid-template-areas, которая определяет сетку, используя имена областей. В данном случае каждый элемент в списке представляет строку в сетке, и точки обозначают пустые ячейки, а буквы обозначают имена заданных областей.
Каждая строка в объявлении должна иметь одинаковое количество ячеек.
Вы можете использовать любое количество смежных точек, чтобы объявить одну пустую ячейку. Пока между точками нет пробелов, они представляют собой одну ячейку.
Обратите внимание, что вы не называете линии с этим синтаксисом, а только области. При использовании этого синтаксиса линии на обоих концах областей фактически автоматически получают имена. Если имя вашей области сетки – foo, имя линии начальной строки и линии начального столбца будет foo-start, а имя последней строки и последней линии столбца будет foo-end. Это означает, что некоторые линии могут иметь несколько имен, например, крайняя левая линия в приведенном выше примере будет иметь три имена: header-start, main-start и footer-start.
CSS Grid свойство: grid-template
Свойство grid-template в CSS Grid позволяет задать структуру сетки, определяя шаблоны строк, колонок и областей.
Пример использования:
.container {
display: grid;
grid-template:
"header header header" 100px
"nav content aside" 1fr
"footer footer footer" 100px / 1fr 3fr 1fr;
}В этом примере мы определяем сетку с тремя строками и тремя колонками. Первая строка состоит из трех областей, которые будут занимать по 100 пикселей высоты. Вторая строка состоит из трех областей, первая и третья займут по одной доле от доступной высоты (1fr), а вторая область займет оставшуюся высоту (content). Третья строка повторяет первую.
Колонки определяются так, что первая и третья займут по одной доле от доступной ширины (1fr), а вторая будет занимать три доли от доступной ширины (3fr).
Также мы определяем имена областей с помощью значений, заключенных в кавычки, разделенных пробелами и расположенных в таком же порядке, как и области. Можно заметить, что область content не задается в grid-template-areas, но находит свое место в шаблоне колонок.
Этот пример использует сокращенную форму свойства grid-template. Если вы хотите определить шаблоны строк и колонок отдельно, а области задать отдельно, вы можете использовать свойства grid-template-rows, grid-template-columns и grid-template-areas.
CSS Grid свойства: column-gap, row-gap, gap
Свойства column-gap и row-gap в CSS Grid используются для управления промежутками между колонками и строками сетки соответственно.
Свойство column-gap определяет ширину промежутка между колонками, тогда как свойство row-gap устанавливает высоту промежутка между строками.
Оба свойства могут принимать значения в единицах измерения длины, таких как px, % или em/rem. Кроме того, для установки значения промежутка можно использовать ключевые слова, такие как normal, которое определяет нормальный промежуток между колонками или строками, определенный браузером.
Использование свойств column-gap и row-gap позволяет легко управлять расстоянием между элементами внутри сетки CSS Grid:
.container {
column-gap: 10px;
row-gap: 15px;
}
В CSS Grid есть сокращенное свойство для row-gap и column-gap, называемое gap. Оно позволяет установить значения для промежутков между строками и колонками одновременно с использованием одного или нескольких значений, разделенных пробелом.
.container {
gap: <grid-row-gap> <grid-column-gap>;
gap: 15px 10px;
}CSS Grid свойство: justify-items
justify-items – это свойство CSS Grid, которое определяет выравнивание элементов сетки вдоль главной оси (inline-axis). Главная ось зависит от значения grid-template-rows. Оно применяется ко всем элементам сетки внутри контейнера.
Значения свойства justify-items могут быть:
.container {
justify-items: start | end | center | stretch;
}Визуальные примеры для всех значений:
.container {
justify-items: start;
}Элементы сетки выравниваются к началу ячеек вдоль главной оси.
.container {
justify-items: end;
}Элементы сетки выравниваются к концу ячеек вдоль главной оси.
.container {
justify-items: center;
}Элементы сетки выравниваются по центру ячеек вдоль главной оси.
.container {
justify-items: stretch;
}Элементы сетки растягиваются на всю доступную ширину вдоль главной оси.
CSS Grid свойство: align-items
align-items – это свойство CSS Grid, которое выравнивает элементы сетки вдоль блочной оси (column-axis). Оно применяется ко всем элементам сетки внутри контейнера.
Значения свойства align-items могут быть:
.container {
align-items: start | end | center | stretch;
}Элементы сетки выравниваются к началу ячеек вдоль блочной оси:
.container {
align-items: start;
}
Элементы сетки выравниваются к концу ячеек вдоль блочной оси:
.container {
align-items: end;
}
Элементы сетки выравниваются по центру ячеек вдоль блочной оси:
.container {
align-items: center;
}
Элементы сетки растягиваются на всю доступную высоту вдоль блочной оси:
.container {
align-items: stretch;
}
Для свойства align-items также существуют модификаторы ключевых слов safe и unsafe (их можно использовать как align-items: safe end).
Ключевое слово safe означает "попытаться выровнять элементы таким образом, но не настаивать на этом, если это приведет к перемещению элемента в недоступную область", в то время как unsafe позволит перемещать контент в недоступные области, что может привести к потере данных (data loss).
CSS Grid свойство: place-items
Свойство place-items устанавливает значения для свойств align-items и justify-items в одном объявлении.
[align-items] / [justify-items] – Первое значение устанавливает свойство align-items, второе значение устанавливает свойство justify-items. Если второе значение опущено, то первое значение устанавливается для обоих свойств.
С помощью данного свойства можно быстро выравнивать содержимое по центру в нескольких направлениях, а также одновременно контролировать выравнивание элементов внутри сетки.
.center {
display: grid;
place-items: center;
}CSS Grid свойство: justify-content
Свойство justify-content выравнивает сетку вдоль оси инлайн (ряды), то есть горизонтально в контейнере grid. Если общий размер сетки меньше размера контейнера, то это свойство позволяет выравнивать сетку внутри контейнера.
Доступные значения:
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}Выравнивание сетки по краю контейнера:
.container {
justify-content: start;
}
Выравнивание сетки по противоположному краю контейнера:
.container {
justify-content: end;
}
Выравнивание сетки по центру контейнера:
.container {
justify-content: center;
}
Увеличивает размер элементов сетки так, чтобы они заполнили всю доступную ширину контейнера:
.container {
justify-content: stretch;
}
Распределяет пространство равномерно между элементами сетки, с половинными промежутками на краях:
.container {
justify-content: space-around;
}
Распределяет пространство равномерно между элементами сетки, без промежутков на краях:
.container {
justify-content: space-between;
}
Распределяет пространство равномерно между элементами сетки, включая края:
.container {
justify-content: space-evenly;
}
CSS Grid свойство: align-content
Свойство align-content выравнивает грид по вертикальной оси (столбцы) в случае, когда размер грида меньше размера его контейнера.
.container {
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}Выравнивает грид с началом контейнера:
.container {
align-content: start;
}
Выравнивает грид по концу контейнера:
.container {
align-content: end;
}
Выравнивает грид по центру контейнера:
.container {
align-content: center;
}
Растягивает элементы грида, чтобы грид заполнил высоту контейнера:
.container {
align-content: stretch;
}
Распределяет равное количество пространства между каждым элементом грида, с половинным размером пространства на концах:
.container {
align-content: space-around;
}
Распределяет равное количество пространства между каждым элементом грида, без пространства на концах:
.container {
align-content: space-between;
}
Распределяет равное количество пространства между каждым элементом грида, включая концы:
.container {
align-content: space-evenly;
}
CSS Grid свойство: place-content
Свойство place-content задает значение одновременно для свойств align-content и justify-content.
[align-content] / [justify-content] – Первое значение устанавливает align-content, второе значение – justify-content. Если второе значение не указано, то оно устанавливается равным первому значению.
CSS Grid свойства: grid-auto-columns, grid-auto-rows
Свойства grid-auto-columns и grid-auto-rows определяют размеры автоматически создаваемых сеточных треков (также называемых неявными сеточными треками) в CSS Grid Layout. Неявные треки создаются в том случае, когда число элементов сетки превышает число ячеек в явной сетке или когда элемент сетки размещается за пределами явной сетки.
Значения свойств могут быть заданы как длина, процентное значение или доля свободного пространства в сетке с использованием единицы измерения fr.
.container {
grid-auto-columns: 100px;
grid-auto-rows: 50px;
}В этом примере, если сетка содержит элементы, которые не могут быть размещены в указанных строках и столбцах явной сетки, то создаются дополнительные неявные сеточные треки шириной 100 пикселей и высотой 50 пикселей соответственно.
Чтобы проиллюстрировать, как создаются неявные дорожки в сетке, рассмотрим следующий пример:
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px;
}
Это создает сетку размером 2 x 2.
Теперь представьте, что вы используете свойства grid-column и grid-row, чтобы разместить ваши элементы сетки следующим образом:
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
Мы указали .item-b начало на линии столбца 5 и конец на линии столбца 6, но мы никогда не определяли линии столбца 5 или 6. Поскольку мы ссылались на несуществующие линии, создаются неявные дорожки с нулевой шириной, чтобы заполнить пробелы. Мы можем использовать свойства grid-auto-columns и grid-auto-rows для указания ширины этих неявных дорожек:
.container {
grid-auto-columns: 60px;
}
CSS Grid свойство: grid-auto-flow
Свойство grid-auto-flow определяет, как работает алгоритм автоматического размещения элементов сетки, если на сетке присутствуют элементы, которые не были явно размещены. Это свойство позволяет контролировать порядок, в котором элементы добавляются на сетку, и направление их размещения (ряды или столбцы). Существует три возможных значения: row (заполнение строк), column (заполнение столбцов) и dense (уплотненное размещение). По умолчанию значение равно row.
.container {
grid-auto-flow: row | column | row dense | column dense;
}Обратите внимание, что dense меняет только визуальный порядок ваших элементов и может привести к тому, что они будут отображаться в неправильном порядке, что плохо для доступности.
Рассмотрим этот HTML-код:
<section class="container">
<div class="item-a">item-a</div>
<div class="item-b">item-b</div>
<div class="item-c">item-c</div>
<div class="item-d">item-d</div>
<div class="item-e">item-e</div>
</section>Мы определяем сетку с пятью столбцами и двумя строками и задаете grid-auto-flow равным row (что является также значением по умолчанию):
.container {
display: grid;
grid-template-columns: 60px 60px 60px 60px 60px;
grid-template-rows: 30px 30px;
grid-auto-flow: row;
}При размещении элементов на сетке мы указываем позиции только для двух из них:
.item-a {
grid-column: 1;
grid-row: 1 / 3;
}
.item-e {
grid-column: 5;
grid-row: 1 / 3;
}Поскольку мы установили grid-auto-flow равным row, наша сетка будет выглядеть так. Обратите внимание, как три элемента, которые мы не разместили (item-b, item-c и item-d), заполняют доступные строки:
Если мы установим grid-auto-flow равным column. item-b, item-c и item-d заполнят столбцы:
CSS Grid свойство: grid
Сокращение для установки всех следующих свойств в одном объявлении: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow (Примечание: вы можете указать только явные или неявные свойства сетки в одном объявлении grid).
Следующие два блока кода эквивалентны:
.container {
grid: 100px 300px / 3fr 1fr;
}
.container {
grid-template-rows: 100px 300px;
grid-template-columns: 3fr 1fr;
}Так же и эти два блока эквивалентны:
.container {
grid: auto-flow / 200px 1fr;
}
.container {
grid-auto-flow: row;
grid-template-columns: 200px 1fr;
}Эти 2 блока тоже эквивалентны:
.container {
grid: auto-flow dense 100px / 1fr 2fr;
}
.container {
grid-auto-flow: row dense;
grid-auto-rows: 100px;
grid-template-columns: 1fr 2fr;
}И эти 2 блока эквивалентны:
.container {
grid: 100px 300px / auto-flow 200px;
}
.container {
grid-template-rows: 100px 300px;
grid-auto-flow: column;
grid-auto-columns: 200px;
}Более сложный пример (оба блока эквивалентны):
.container {
grid: [row1-start] "header header header" 1fr [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
.container {
grid-template-areas:
"header header header"
"footer footer footer";
grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
}Свойства для дочерних элементов (Grid Items)
CSS Grid свойства: grid-column-start, grid-column-end, grid-row-start, grid-row-end
Свойства grid-column-start, grid-column-end, grid-row-start и grid-row-end определяют местоположение элемента сетки, указывая на конкретные линии сетки.
Свойство grid-column-start/grid-row-start указывает на линию, где элемент начинается, а свойство grid-column-end/grid-row-end указывает на линию, где элемент заканчивается.
Значения:
Если свойство grid-column-end/grid-row-end не указано, элемент по умолчанию займет одну ячейку.
Элементы могут перекрываться. Для контроля порядка наложения элементов можно использовать свойство z-index.
.item {
grid-column-start: <number> | <name> | span <number> | span <name> | auto;
grid-column-end: <number> | <name> | span <number> | span <name> | auto;
grid-row-start: <number> | <name> | span <number> | span <name> | auto;
grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}Примеры с илюстрацией:
.item-a {
grid-column-start: 2;
grid-column-end: five;
grid-row-start: row1-start;
grid-row-end: 3;
}
.item-b {
grid-column-start: 1;
grid-column-end: span col4-start;
grid-row-start: 2;
grid-row-end: span 2;
}
CSS Grid свойства: grid-column, grid-row
grid-column и grid-row – это сокращения для свойств grid-column-start и grid-column-end, и grid-row-start и grid-row-end, соответственно.
grid-column и grid-row позволяют установить начальную и конечную линии сетки для элемента на одной строке CSS кода.
[start-line] / [end-line] – для каждого свойства принимает те же значения, что и grid-column-start и grid-column-end, или grid-row-start и grid-row-end, включая значение span.
.item {
grid-column: <start-line> / <end-line> | <start-line> / span <value>;
grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}Пример с иллюстрацией:
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
CSS Grid свойство: grid-area
Свойство grid-area задает имя элементу, чтобы на него можно было ссылаться в шаблоне, созданном с помощью свойства grid-template-areas. Также это свойство может использоваться как сокращенный вариант для задания значений grid-row-start + grid-column-start + grid-row-end + grid-column-end.
.item {
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}Примеры:
Для задания имени элементу:
.item-d {
grid-area: header;
}Как сокращенный вариант для задания значений grid-row-start + grid-column-start + grid-row-end + grid-column-end:
.item-d {
grid-area: 1 / col4-start / last-line / 6;
}
CSS Grid свойство: justify-self
Свойство justify-self выравнивает элемент сетки внутри ячейки вдоль оси строки (в отличие от align-self, который выравнивает вдоль оси столбца). Это значение применяется к элементу сетки внутри одной ячейки.
Значения:
.item {
justify-self: start | end | center | stretch;
}Примеры с иллюстрациями:
.item-a {
justify-self: start;
}
.item-a {
justify-self: end;
}
.item-a {
justify-self: center;
}
.item-a {
justify-self: stretch;
}
Чтобы установить выравнивание для всех элементов в сетке, это значение также может быть установлено на контейнере с помощью свойства justify-items.
CSS Grid свойство: align-self
align-self – выравнивает элемент сетки внутри ячейки вдоль блочной (колоночной) оси.
.item {
align-self: start | end | center | stretch;
}Примеры с иллюстрациями:
.item-a {
align-self: start;
}
.item-a {
align-self: end;
}
.item-a {
align-self: center;
}
.item-a {
align-self: stretch;
}
Чтобы задать это свойство всем элементам, используйте свойство align-items на родительском контейнере.
CSS Grid свойство: place-self
Свойство place-self устанавливает свойства align-self и justify-self одновременно.
Значения:
.item-a {
place-self: center;
}
.item-a {
place-self: center stretch;
}
Комментарии (0)
Пока еще не было комментариев ✍️