3.1 Właściwość grid-template-columns
CSS Grid Layout pozwala na tworzenie złożonych układów stron internetowych z użyciem wierszy i kolumn. Dwie kluczowe właściwości definiujące strukturę siatki to grid-template-rows i grid-template-columns. Te właściwości pozwalają określić liczbę i rozmiary wierszy i kolumn w kontenerze grid, co daje programistom pełną kontrolę nad układem elementów.
Właściwość grid-template-columns określa liczbę i rozmiary kolumn w siatce. Przyjmuje jedno lub więcej wartości, które mogą być podane w różnych jednostkach miary, takich jak piksele (px), procenty (%), jednostki elastyczności (fr) i inne.
Przykład 1: Ustalanie stałych rozmiarów kolumn
W tym przykładzie siatka będzie składała się z trzech kolumn. Pierwsza kolumna ma szerokość 100px, druga kolumna ma szerokość 200px, trzecia kolumna ma szerokość 100px:
.grid-container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Trzy kolumny ze stałymi rozmiarami */
}
Przykład 2: Użycie jednostek elastyczności (fr)
W tym przykładzie siatka będzie składała się z trzech kolumn. Pierwsza i trzecia kolumna zajmą równą ilość przestrzeni, a druga kolumna będzie dwa razy szersza od każdej z nich:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* Trzy kolumny z elastycznymi rozmiarami */
}
Przykład 3: Użycie powtórzenia (repeat)
W tym przykładzie używana jest funkcja repeat, która uproszcza zapis. Siatka będzie składała się z trzech kolumn o tej samej szerokości:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Trzy równe kolumny */
}
Przykład 4: Określanie minimalnych i maksymalnych rozmiarów (minmax)
W tym przykładzie każda z trzech kolumn będzie miała minimalną szerokość 100px oraz elastyczny rozmiar, który może zwiększać się do 1fr w zależności od dostępnej przestrzeni:
.grid-container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Trzy kolumny z minimalną szerokością 100px i elastycznymi rozmiarami */
}
3.2 Właściwość grid-template-rows
Właściwość grid-template-rows jest podobna do grid-template-columns, ale określa liczbę i rozmiary wierszy w siatce. Przyjmuje jedno lub więcej wartości, które mogą być podane w różnych jednostkach miary.
Przykład 1: Ustalanie stałych rozmiarów wierszy
W tym przykładzie siatka będzie składała się z trzech wierszy. Pierwszy wiersz ma wysokość 50px, drugi wiersz ma wysokość 100px, trzeci wiersz ma wysokość 50px:
.grid-container {
display: grid;
grid-template-rows: 50px 100px 50px; /* Trzy wiersze ze stałymi rozmiarami */
}
Przykład 2: Użycie jednostek elastyczności (fr)
W tym przykładzie siatka będzie składała się z trzech wierszy. Pierwszy i trzeci wiersz zajmą równą ilość przestrzeni, a drugi wiersz będzie dwa razy wyższy od każdego z nich:
.grid-container {
display: grid;
grid-template-rows: 1fr 2fr 1fr; /* Trzy wiersze z elastycznymi rozmiarami */
}
Przykład 3: Użycie powtórzenia (repeat)
W tym przykładzie używana jest funkcja repeat, która uproszcza zapis. Siatka będzie składała się z trzech wierszy o tej samej wysokości:
.grid-container {
display: grid;
grid-template-rows: repeat(3, 1fr); /* Trzy równe wiersze */
}
Przykład 4: Określanie minimalnych i maksymalnych rozmiarów (minmax)
W tym przykładzie każdy z trzech wierszy będzie miał minimalną wysokość 50px oraz elastyczny rozmiar, który może zwiększać się do 1fr w zależności od dostępnej przestrzeni:
.grid-container {
display: grid;
grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Trzy wiersze z minimalną wysokością 50px i elastycznymi rozmiarami */
}
3.3 Łączenie właściwości
Łączenie właściwości grid-template-rows i grid-template-columns
Te właściwości mogą być używane razem do tworzenia złożonych siatek z różnymi rozmiarami wierszy i kolumn.
W tym przykładzie siatka będzie składała się z dwóch kolumn: pierwsza kolumna zajmie 1 część dostępnej przestrzeni, a druga kolumna — 2 części. Siatka również będzie składała się z dwóch wierszy: pierwszy wiersz o wysokości 100px, drugi wiersz o wysokości 200px.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
}
Przykład pełnej implementacji:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.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 CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Element 1</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
<div class="grid-item">Element 4</div>
</div>
</body>
</html>
Objaśnienie kodu:
.grid-container: definiuje kontener jako grid-kontener z dwiema kolumnami i dwoma wierszami. Odstępy między elementami są ustawione za pomocą właściwościgap.grid-item: definiuje podstawowe style dla elementów siatki, takie jak kolor tła, kolor tekstu, odstępy, wyśrodkowanie tekstu i obramowanie
GO TO FULL VERSION