2.1 Właściwość display: grid
CSS Grid Layout to potężny system układu, który pozwala na tworzenie złożonych układów stron internetowych z użyciem rzędów i kolumn. Podstawowym krokiem przy pracy z CSS Grid jest stworzenie kontenera Grid. Poniżej omówimy, jak użyć właściwości display: grid do stworzenia kontenera Grid i zarządzania jego podstawowymi aspektami.
Podstawowe koncepcje tworzenia kontenera Grid
Właściwość display: grid
Właściwość display: grid definiuje element jako kontener Grid. To podstawowy krok, który pozwala korzystać z pełnych możliwości CSS Grid do układu elementów.
Przykład:
.grid-container {
display: grid;
}
Podstawowe elementy kontenera Grid
Po zdefiniowaniu kontenera Grid przy użyciu właściwości display: grid, wszystkie elementy potomne tego kontenera automatycznie stają się elementami grid. To pozwala zarządzać ich rozmieszczeniem i wyrównaniem wewnątrz kontenera.
Przykład:
.grid-container {
display: grid;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład kontenera 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>
</body>
</html>
Wyjaśnienie kodu:
.grid-container: definiuje element jako kontener Grid przy użyciu właściwościdisplay: grid. Dodatkowo dodaje ramkę, aby wizualnie wyróżnić kontener.grid-item: definiuje podstawowe style dla elementów wewnątrz kontenera Grid, takie jak kolor tła, kolor tekstu, odstępy, ramka i wyrównanie tekstu
2.2 Zagnieżdżone kontenery Grid
Jedną z zalet CSS Grid jest możliwość tworzenia zagnieżdżonych kontenerów Grid. To pozwala tworzyć złożone układy, gdzie jeden element grid może stać się kontenerem grid dla swoich elementów potomnych.
Przykład:
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.nested-grid-container {
display: grid;
gap: 5px;
background-color: #2980b9;
padding: 10px;
}
.nested-grid-item {
background-color: #1abc9c;
padding: 10px;
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>Zagnieżdżone kontenery 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">
<div class="nested-grid-container">
<div class="nested-grid-item">Zagnieżdżony element 1</div>
<div class="nested-grid-item">Zagnieżdżony element 2</div>
</div>
</div>
<div class="grid-item">Element 3</div>
</div>
</body>
</html>
Wyjaśnienie kodu:
-
.nested-grid-container: definiuje zagnieżdżony kontener Grid przy użyciu właściwościdisplay: grid, a także dodaje odstępy między elementami (gap: 5px) i wewnętrzny odstęp (padding: 10px) -
.nested-grid-item: definiuje podstawowe style dla elementów wewnątrz zagnieżdżonego kontenera Grid, takie jak kolor tła, odstępy i ramka
2.3 Zarządzanie zachowaniem kontenera Grid
Właściwość display: grid pozwala również na użycie dodatkowych właściwości do zarządzania zachowaniem kontenera Grid. Na przykład, właściwość grid-auto-flow zarządza automatycznym rozmieszczeniem elementów.
Przykład:
.grid-container {
display: grid;
grid-auto-flow: row;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kontener Grid z auto-flow</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 class="grid-item">Element 5</div>
</div>
</body>
</html>
2.4 Zastosowanie Flexbox wewnątrz kontenera Grid
W niektórych przypadkach, użycie Flexbox wewnątrz elementów grid może być przydatne do tworzenia bardziej złożonych układów. To pozwala łączyć zalety obu technologii.
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
border: 1px solid #fff;
text-align: center;
}
.flex-container {
display: flex;
gap: 10px;
}
.flex-item {
background-color: #1abc9c;
padding: 10px;
flex: 1;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox wewnątrz kontenera Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item flex-container">
<div class="flex-item">Flex element 1</div>
<div class="flex-item">Flex element 2</div>
</div>
<div class="grid-item">Element 2</div>
<div class="grid-item">Element 3</div>
</div>
</body>
</html>
Wyjaśnienie kodu:
.flex-container: definiuje element grid jako kontener flex przy użyciu właściwościdisplay: flex.flex-item: definiuje podstawowe style dla elementów wewnątrz kontenera flex, takie jak kolor tła, odstępy i elastyczność (flex: 1)
GO TO FULL VERSION