4.1 Właściwość grid-column
CSS Grid Layout oferuje świetne narzędzia do zarządzania rozmieszczeniem elementów w siatce. Jednymi z
głównych narzędzi są właściwości grid-row i grid-column. Te właściwości pozwalają programistom dokładnie
określać, które wiersze i kolumny mają zajmować grid-elementy, zapewniając elastyczność i kontrolę nad układem.
Właściwość grid-column określa, które kolumny będzie zajmować element w grid-kontenerze.
Składnia:
.grid-item {
grid-column: start / end;
}
Gdzie:
start: linia początkowa siatkiend: linia końcowa siatki
Przykład 1: Umieszczenie elementu w konkretnej kolumnie
W tym przykładzie element będzie umiejscowiony między drugą a trzecią linią siatki, zajmując drugą kolumnę:
.grid-item {
grid-column: 2 / 3; /* Element zajmuje przestrzeń między drugą a trzecią linią siatki */
}
Przykład 2: Element zajmujący kilka kolumn
W tym przykładzie element będzie zajmować trzy kolumny, zaczynając od pierwszej linii i kończąc na czwartej linii siatki:
.grid-item {
grid-column: 1 / 4; /* Element zajmuje przestrzeń od pierwszej do czwartej linii siatki */
}
Przykład 3: Użycie span do objęcia kilku kolumn
W tym przykładzie element będzie zajmować dwie kolumny, zaczynając od bieżącej pozycji:
.grid-item {
grid-column: span 2; /* Element zajmuje dwie kolumny, zaczynając od bieżącej pozycji */
}
4.2 Właściwość grid-row
Właściwość grid-row określa, które wiersze będzie zajmować element w grid-kontenerze.
Składnia:
.grid-item {
grid-row: start / end;
}
Gdzie:
start: linia początkowa siatkiend: linia końcowa siatki
Przykład 1: Umieszczenie elementu w konkretnej linii
W tym przykładzie element będzie umiejscowiony między pierwszą a drugą linią siatki, zajmując pierwszy wiersz:
.grid-item {
grid-row: 1 / 2; /* Element zajmuje przestrzeń między pierwszą a drugą linią siatki */
}
Przykład 2: Element zajmujący kilka wierszy
W tym przykładzie element będzie zajmować dwa wiersze, zaczynając od drugiej linii i kończąc na czwartej linii siatki:
.grid-item {
grid-row: 2 / 4; /* Element zajmuje przestrzeń od drugiej do czwartej linii siatki */
}
Przykład 3: Użycie span do objęcia kilku wierszy
W tym przykładzie element będzie zajmować trzy wiersze, zaczynając od bieżącej pozycji:
.grid-item {
grid-row: span 3; /* Element zajmuje trzy wiersze, zaczynając od bieżącej pozycji */
}
Przykład 4. Użycie wartości ujemnych
.element {
grid-row: 1 / -1; /* Element zaczyna się na pierwszej linii i kończy na ostatniej */
}
4.3 Łączenie właściwości grid-row i grid-column
Aby stworzyć bardziej złożone układy, można łączyć właściwości grid-row i grid-column
w celu dokładnego zarządzania rozmieszczeniem elementów.
Przykład: Złożony układ z użyciem grid-row i 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; /* Element zajmuje pierwszą i drugą linię */
grid-column: 1 / 3; /* Element zajmuje pierwszą i drugą kolumnę */
}
.item2 {
background-color: lightgreen;
grid-row: 3 / 5; /* Element zajmuje trzecią i czwartą linię */
grid-column: 2 / 5; /* Element zajmuje drugą, trzecią i czwartą kolumnę */
}
.item3 {
background-color: lightcoral;
grid-row: 1 / 2; /* Element zajmuje pierwszą linię */
grid-column: 3 / 5; /* Element zajmuje trzecią i czwartą kolumnę */
}
</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>
Objaśnienie:
- Kontener
.containerma cztery wiersze i cztery kolumny, z których każda zajmuje równą przestrzeń - Element
.item1zajmuje pierwsze dwa wiersze i pierwsze dwie kolumny - Element
.item2zajmuje trzecią i czwartą linię oraz drugą, trzecią i czwartą kolumnę - Element
.item3zajmuje pierwszą linię oraz trzecią i czwartą kolumnę
GO TO FULL VERSION