4.1 Свойство grid-column
CSS Grid Layout предоставляет солидные инструменты для управления размещением элементов в сетке. Одними из основных инструментов являются свойства grid-row и grid-column. Эти свойства позволяют разработчикам точно указывать, какие строки и столбцы должны занимать grid-элементы, обеспечивая гибкость и контроль над макетом.
Свойство grid-column определяет, какие столбцы будет занимать элемент в grid-контейнере.
Синтаксис:
.grid-item {
grid-column: start / end;
}
Где:
start: начальная линия сеткиend: конечная линия сетки
Пример 1: Размещение элемента в определенном столбце
В этом примере элемент будет расположен между второй и третьей линиями сетки, занимая второй столбец:
.grid-item {
grid-column: 2 / 3; /* Элемент занимает пространство между второй и третьей линиями сетки */
}
Пример 2: Элемент, занимающий несколько столбцов
В этом примере элемент будет занимать три столбца, начиная с первой линии и заканчивая четвертой линией сетки:
.grid-item {
grid-column: 1 / 4; /* Элемент занимает пространство от первой до четвертой линии сетки */
}
Пример 3: Использование span для охвата нескольких столбцов
В этом примере элемент будет занимать два столбца, начиная с текущей позиции:
.grid-item {
grid-column: span 2; /* Элемент занимает два столбца, начиная с текущей позиции */
}
4.2 Свойство grid-row
Свойство grid-row определяет, какие строки будет занимать элемент в grid-контейнере.
Синтаксис:
.grid-item {
grid-row: start / end;
}
Где:
start: начальная линия сеткиend: конечная линия сетки
Пример 1: Размещение элемента в определенной строке
В этом примере элемент будет расположен между первой и второй линиями сетки, занимая первую строку:
.grid-item {
grid-row: 1 / 2; /* Элемент занимает пространство между первой и второй линиями сетки */
}
Пример 2: Элемент, занимающий несколько строк
В этом примере элемент будет занимать две строки, начиная со второй линии и заканчивая четвертой линией сетки:
.grid-item {
grid-row: 2 / 4; /* Элемент занимает пространство от второй до четвертой линии сетки */
}
Пример 3: Использование span для охвата нескольких строк
В этом примере элемент будет занимать три строки, начиная с текущей позиции:
.grid-item {
grid-row: span 3; /* Элемент занимает три строки, начиная с текущей позиции */
}
Пример 4. Использование отрицательных значений
.element {
grid-row: 1 / -1; /* Элемент начинается на первой линии и заканчивается на последней */
}
4.3 Комбинирование свойств grid-row и grid-column
Для создания более сложных макетов можно комбинировать свойства grid-row и grid-column для точного управления размещением элементов.
Пример: Сложный макет с использованием grid-row и grid-column
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Row and Column Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.item1 {
background-color: lightblue;
grid-row: 1 / 3; /* Элемент занимает первую и вторую строки */
grid-column: 1 / 3; /* Элемент занимает первую и вторую колонки */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* Элемент занимает третью и четвертую строки */
grid-column: 2 / 5; /* Элемент занимает вторую, третью и четвертую колонки */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* Элемент занимает первую строку */
grid-column: 3 / 5; /* Элемент занимает третью и четвертую колонки */
}
</style>
</head>
<body>
<div class="container">
<div class="item1">Item 1</div>
<div class="item2">Item 2</div>
<div class="item3">Item 3</div>
</div>
</body>
</html>
Объяснение:
- Контейнер
.containerимеет четыре строки и четыре колонки, каждая из которых занимает равное пространство - Элемент
.item1занимает первые две строки и первые две колонки - Элемент
.item2занимает третью и четвертую строки и вторую, третью и четвертую колонки - Элемент
.item3занимает первую строку и третью и четвертую колонки
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ