CSS Grid Layout — это современный модуль CSS, предназначенный для создания двухмерных сеточных макетов. В отличие от Flexbox, который работает преимущественно в одном измерении (либо по строке, либо по колонке), Grid позволяет управлять как строками, так и колонками одновременно, предоставляя разработчикам больше возможностей для создания сложных и гибких макетов.
Основные концепции Grid Layout
- Контейнер Grid: Родительский элемент, к которому применяется свойство
display: grid. Внутри него располагаются дочерние элементы, называемые ячейки сетки (grid items). - Линии сетки: Горизонтальные и вертикальные линии, образующие сетку. Эти линии определяют границы ячеек.
- Треки: Пространство между двумя соседними линиями сетки. Могут быть строками или колонками.
- Ячейка: Область, ограниченная четырьмя линиями сетки (двумя горизонтальными и двумя вертикальными).
- Области: Несколько смежных ячеек, объединенных в одну большую область.
Свойства контейнера Grid
1. display
display: grid;: Устанавливает контейнер как сетку.display: inline-grid;: То же самое, что иgrid, но делает контейнер строчным элементом.
2. grid-template-columns и grid-template-rows
Эти свойства задают количество и размеры колонок и строк соответственно:
grid-template-columns: 100px 50% 150px;: Создает три колонки шириной 100 пикселей, 50% ширины контейнера и 150 пикселей.grid-template-rows: repeat(3, 1fr);: Создает три строки равной высоты, каждая из которых займет одну долю свободного пространства (1fr).
3. grid-template-areas
Позволяет задавать имена областям сетки, чтобы потом легче было размещать элементы:
.container {
display: grid;
grid-template-areas:
"header header"
"sidebar content";
}Здесь создается сетка с двумя строками и двумя колонками, где верхняя строка полностью занята заголовком (header), а вторая строка разделена на боковую панель (sidebar) и основное содержимое (content).
4. grid-auto-flow
Управляет автоматическим заполнением пустых ячеек сетки:
grid-auto-flow: row;: Заполняет ячейки по строкам (по умолчанию).grid-auto-flow: column;: Заполняет ячейки по колонкам.
5. grid-gap / gap
Устанавливает промежутки между треками сетки:
grid-gap: 10px;: Устанавливает отступы в 10 пикселей между треками.gap: 15px;: То же самое, что иgrid-gap, но используется в более новых версиях спецификации.
6. justify-items и align-items
Эти свойства управляют выравниванием содержимого внутри ячеек по горизонтальной и вертикальной осям соответственно:
justify-items: start;: Выравнивает содержимое ячеек по левому краю.align-items: end;: Выравнивает содержимое ячеек по нижнему краю.
7. justify-content и align-content
Эти свойства управляют выравниванием всей сетки внутри контейнера:
justify-content: center;: Центрирует сетку по горизонтали.align-content: space-between;: Располагает строки с интервалами между ними.
Свойства элементов сетки
1. grid-area
Позволяет указать, какую область сетки должен занимать элемент:
.item {
grid-area: sidebar;
}Здесь элемент item будет занимать область с именем sidebar, определенную ранее через grid-template-areas.
2. grid-column и grid-row
Эти свойства позволяют явно указать, какие колонки и строки должна занимать ячейка:
grid-column: 1 / 3;: Ячейка будет занимать колонки с первой по третью включительно.grid-row: 2 / span 2;: Ячейка будет начинаться со второй строки и занимать две строки.
3. grid-column-start, grid-column-end, grid-row-start, grid-row-end
Эти свойства также используются для указания диапазона колонок и строк, которые должна занимать ячейка:
grid-column-start: 1; grid-column-end: 3;: Аналогичноgrid-column: 1 / 3;.grid-row-start: 2; grid-row-end: 4;: Аналогичноgrid-row: 2 / 4;.
4. place-self
Это сокращенное свойство для одновременного задания значений align-self и justify-self:
place-self: center;: Центрирует элемент как по горизонтали, так и по вертикали.
Пример использования Grid Layout
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Grid Layout Example</title> <style> .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px 300px 100px; gap: 10px; height: 100vh; } .header { grid-column: 1 / 4; background-color: lightblue; } .sidebar { grid-row: 2 / 4; background-color: lightcoral; } .content { grid-column: 2 / 4; grid-row: 2; background-color: lightgreen; } .footer { grid-column: 1 / 4; background-color: lightgray; } </style> </head> <body> <div class="container"> <div class="header">Header</div> <div class="sidebar">Sidebar</div> <div class="content">Content</div> <div class="footer">Footer</div> </div> </body> </html>
В этом примере создается сетка с тремя колонками и тремя строками. Заголовок (header) занимает всю верхнюю строку, боковая панель (sidebar) располагается во втором и третьем ряду, основное содержимое (content) находится во втором ряду, а нижний колонтитул (footer) занимает последнюю строку.
CSS Grid Layout является мощным инструментом для создания сложных и гибких макетов. С его помощью можно легко управлять размещением элементов как по строкам, так и по колонкам, создавая адаптивные и удобные интерфейсы.
Загрузка...