6.1 Właściwość grid-gap
CSS Grid Layout dostarcza elastyczne narzędzia do zarządzania przestrzenią między elementami siatki. Właściwości
grid-gap, grid-row-gap i grid-column-gap pozwalają łatwo ustalić odstęp
między wierszami i kolumnami, co pomaga tworzyć schludne i zorganizowane układy. Przyjrzyjmy się bliżej tym właściwościom.
Właściwość grid-gap (skrócone gap) określa ogólny odstęp między wierszami a kolumnami w siatce.
Jest to skrócone zapisanie dla grid-row-gap i grid-column-gap.
Składnia:
.grid-container {
grid-gap: value;
}
Gdzie:
-
value: wartość odstępu między wierszami a kolumnami. Może być podana w różnych jednostkach miary (px,%,fr,auto, itd.)
Przykład 1: Jednolita wartość dla wierszy i kolumn
W tym przykładzie odstęp 20px zostanie zastosowany zarówno do wierszy, jak i kolumn:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 20px; /* Odstęp 20px między wszystkimi wierszami i kolumnami */
}
Przykład 2: Różne wartości dla wierszy i kolumn
W tym przykładzie użyte są dwie wartości: pierwsza (10px) dla wierszy, druga (20px) dla kolumn:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px 20px; /* 10px między wierszami, 20px między kolumnami */
}
6.2 Właściwość grid-row-gap
Właściwość grid-row-gap określa odstęp między wierszami w siatce. To pozwala ustalić oddzielną wartość
dla odstępu między wierszami, niezależnie od kolumn.
Składnia:
.grid-container {
grid-row-gap: value;
}
Gdzie:
value: wartość odstępu między wierszami. Może być podana w różnych jednostkach miary
Przykład 1: Ustalenie stałego odstępu między wierszami
W tym przykładzie odstęp między wierszami wynosi 15px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 15px; /* Odstęp 15px między wierszami */
}
Przykład 2: Użycie procentów do ustalenia odstępu
W tym przykładzie odstęp między wierszami wynosi 5% wysokości wiersza:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-row-gap: 5%; /* Odstęp 5% wysokości wiersza */
}
6.3 Właściwość grid-column-gap
Właściwość grid-column-gap określa odstęp między kolumnami w siatce. To pozwala ustalić oddzielną
wartość dla odstępu między kolumnami, niezależnie od wierszy.
Składnia:
.grid-container {
grid-column-gap: value;
}
Gdzie:
value: wartość odstępu między kolumnami. Może być podana w różnych jednostkach miary
Przykład 1: Ustalenie stałego odstępu między kolumnami
W tym przykładzie odstęp między kolumnami wynosi 25px:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 25px; /* Odstęp 25px między kolumnami */
}
Przykład 2: Użycie em do ustalenia odstępu
W tym przykładzie odstęp między kolumnami wynosi 2em:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-column-gap: 2em; /* Odstęp 2em między kolumnami */
}
6.4 Łączne użycie grid-row-gap i grid-column-gap
Możesz łączyć właściwości grid-row-gap i grid-column-gap dla bardziej precyzyjnego zarządzania
odstępami między wierszami i kolumnami.
Przykład pełnego wdrożenia:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Trzy kolumny o jednakowej szerokości */
grid-template-rows: repeat(3, 100px); /* Trzy wiersze o stałej wysokości */
grid-row-gap: 15px; /* Odstęp 15px między wierszami */
grid-column-gap: 25px; /* Odstęp 25px między kolumnami */
}
.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>Przykład użycia grid-gap, grid-row-gap i grid-column-gap</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Element 1</div>
<div class="grid-item item2">Element 2</div>
<div class="grid-item item3">Element 3</div>
<div class="grid-item item4">Element 4</div>
<div class="grid-item item5">Element 5</div>
<div class="grid-item item6">Element 6</div>
</div>
</body>
</html>
Wyjaśnienie kodu:
-
.grid-container: tworzy kontener Grid z trzema kolumnami o jednakowej szerokości i trzema wierszami o stałej wysokości. Używa właściwościgrid-row-gapigrid-column-gapdo ustalenia odstępów między wierszami i kolumnami -
.grid-item: definiuje podstawowe style dla elementów siatki, takie jak kolor tła, kolor tekstu, padding, wyśrodkowanie tekstu i obramowanie
GO TO FULL VERSION