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займає перший рядок і третю і четверту колонки
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ