6.1 Властивість grid-gap
CSS Grid Layout надає гнучкі інструменти для управління простором між елементами сітки. Властивості grid-gap, grid-row-gap і grid-column-gap дозволяють легко задавати відстань між рядками і стовпцями, що допомагає створювати акуратні й організовані макети. Розглянемо ці властивості детальніше.
Властивість grid-gap (скорочене gap) визначає загальну відстань між рядками і стовпцями у сітці. Ця властивість є скороченим записом для grid-row-gap і grid-column-gap.
Синтаксис:
.grid-container {
grid-gap: value;
}
Де:
-
value: значення відстані між рядками і стовпцями. Може бути задано у різних одиницях вимірювання (px,%,fr,autoі т. д.)
Приклад 1: Єдине значення для рядків і стовпців
У цьому прикладі відстань у 20px буде застосована як до рядків, так і до стовпців:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* Відстань 20px між усіма рядками та стовпцями */
}
Приклад 2: Різні значення для рядків і стовпців
У цьому прикладі використано два значення: перше (10px) для рядків, друге (20px) для стовпців:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 10px між рядками, 20px між стовпцями */
}
6.2 Властивість grid-row-gap
Властивість grid-row-gap визначає відстань між рядками у сітці. Це дозволяє задати окреме значення для відстані між рядками, незалежно від стовпців.
Синтаксис:
.grid-container {
grid-row-gap: value;
}
Де:
value: значення відстані між рядками. Може бути задано у різних одиницях вимірювання Приклад 1: Завдання фіксованої відстані між рядками
У цьому прикладі відстань між рядками буде 15px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* Відстань 15px між рядками */
}
Приклад 2: Використання відсотків для завдання відстані
У цьому прикладі відстань між рядками буде 5% від висоти рядка:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* Відстань 5% від висоти рядка */
}
6.3 Властивість grid-column-gap
Властивість grid-column-gap визначає відстань між стовпцями у сітці. Це дозволяє задати окреме значення для відстані між стовпцями, незалежно від рядків.
Синтаксис:
.grid-container {
grid-column-gap: value;
}
Де:
value: значення відстані між стовпцями. Може бути задано у різних одиницях вимірювання
Приклад 1: Завдання фіксованої відстані між стовпцями
У цьому прикладі відстань між стовпцями буде 25px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* Відстань 25px між стовпцями */
}
Приклад 2: Використання em для завдання відстані
У цьому прикладі відстань між стовпцями буде 2em:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* Відстань 2em між стовпцями */
}
6.4 Комбіноване використання grid-row-gap і grid-column-gap
Ви можете комбінувати властивості grid-row-gap і grid-column-gap для більш точного управління відстанями між рядками і стовпцями.
Приклад повної реалізації:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три стовпці однакової ширини */
grid-template-rows: repeat(3, 100px); /* Три рядки фіксованої висоти */
grid-row-gap: 15px; /* Відстань 15px між рядками */
grid-column-gap: 25px; /* Відстань 25px між стовпцями */
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Приклад використання grid-gap, grid-row-gap і grid-column-gap</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Елемент 1</div>
<div class="grid-item item2">Елемент 2</div>
<div class="grid-item item3">Елемент 3</div>
<div class="grid-item item4">Елемент 4</div>
<div class="grid-item item5">Елемент 5</div>
<div class="grid-item item6">Елемент 6</div>
</div>
</body>
</html>
Пояснення коду:
-
.grid-container: створює контейнер Grid з трьома стовпцями однакової ширини і трьома рядками фіксованої висоти. Використовує властивостіgrid-row-gapіgrid-column-gapдля завдання відстаней між рядками і стовпцями -
.grid-item: визначає базові стилі для елементів сітки, такі як фон, колір тексту, відступи, центрування тексту і рамка
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ