1.1 Основные принципы Grid Layout
CSS Grid Layout — это мощный инструмент для создания сложных и адаптивных макетов. Он предоставляет разработчикам двухмерную систему сеток для размещения элементов, что упрощает создание как простых, так и сложных макетов. Рассмотрим основные концепции и синтаксис CSS Grid, не углубляясь в специфические свойства.
Основные концепции CSS Grid
- Grid-контейнер и Grid-элементы:
- Grid-контейнер — это элемент, который включает в себя
display: grid. Этот элемент становится контейнером сетки, а все его непосредственные дочерние элементы становятся Grid-элементами - Grid-элементы — это непосредственные дочерние элементы Grid-контейнера, которые размещаются в сетке
- Grid-контейнер — это элемент, который включает в себя
- Оси сетки:
- Главная ось (inline axis) и блочная ось (block axis): Grid поддерживает две оси для размещения элементов — главную и блочную оси. По умолчанию, главная ось идет горизонтально, а блочная — вертикально
- Ячейки сетки (Grid Cells):
- Ячейки сетки — это базовые блоки, образующиеся на пересечении строк и колонок. Каждый Grid-элемент занимает одну или несколько ячеек
- Линии сетки (Grid Lines):
- Линии сетки — это горизонтальные и вертикальные линии, разделяющие строки и колонки. Они используются для размещения элементов относительно сетки
- Области сетки (Grid Areas):
- Области сетки — это именованные области сетки, созданные путем объединения нескольких ячеек. Они позволяют группировать ячейки и размещать элементы в определенных областях
1.2 Синтаксические элементы
Основные синтаксические элементы CSS Grid
1. Создание Grid-контейнера:
.container {
display: grid; /* или display: inline-grid */
}
2. Определение структуры сетки:
CSS
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Определяет три колонки разной ширины */
grid-template-rows: 50px 100px; /* Определяет две строки разной высоты */
}
3. Объединение ячеек с помощью grid-area:
CSS
.item1 {
grid-area: 1 / 1 / 2 / 4; /* Элемент занимает первую строку и первые три колонки */
}
4. Автоматическое размещение элементов:
CSS
.container {
display: grid;
grid-auto-rows: minmax(100px, auto); /* Задает минимальную высоту строк */
}
1.3 Примеры
Простой макет с CSS Grid:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
Объяснение:
- Контейнер .container задает три колонки, первая и третья из которых занимают равную долю доступного пространства, а вторая — в два раза больше
- Задаются две строки с фиксированной высотой
- Свойство gap задает расстояние между ячейками сетки
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ