13.14. Przykłady zastosowania Grid Layout
Wprowadzenie
CSS Grid Layout to niezwykle potężne narzędzie do tworzenia złożonych, dwuwymiarowych układów stron internetowych. W tym rozdziale poznaliśmy wiele właściwości Grid. Teraz zobaczmy, jak można je połączyć w praktycznych przykładach.
Przykład 1: Typowy Układ Strony (Header, Sidebar, Content, Footer)
Jednym z najczęstszych zastosowań Grid jest tworzenie podstawowego szkieletu strony. Użyjemy grid-template-areas dla czytelności.
<body class="page-layout">
<header>Nagłówek</header>
<nav>Nawigacja</nav>
<aside>Sidebar</aside>
<main>Główna treść...</main>
<footer>Stopka</footer>
</body>body.page-layout {
display: grid;
min-height: 100vh; /* Aby stopka była na dole, nawet przy małej treści */
grid-template-columns: 150px 1fr; /* Kolumna na sidebar, reszta na treść */
grid-template-rows: auto auto 1fr auto; /* Wiersze: header, nav, main/aside, footer */
gap: 10px;
grid-template-areas:
"header header"
"nav nav"
"sidebar main"
"footer footer";
}
header { grid-area: header; background-color: #add8e6; padding: 10px; }
nav { grid-area: nav; background-color: #b0e0e6; padding: 10px; }
aside { grid-area: sidebar; background-color: #90ee90; padding: 10px; }
main { grid-area: main; background-color: #fafad2; padding: 10px; }
footer { grid-area: footer; background-color: #d3d3d3; padding: 10px; }
/* Prosta responsywność - na małych ekranach układ jednokolumnowy */
@media (max-width: 600px) {
body.page-layout {
grid-template-columns: 1fr; /* Jedna kolumna */
grid-template-rows: auto auto auto 1fr auto; /* Dodatkowy wiersz na sidebar */
grid-template-areas:
"header"
"nav"
"sidebar" /* Sidebar pod nawigacją */
"main"
"footer";
}
}
Kluczowe punkty:
grid-template-areaszapewnia czytelny opis układu.- Użycie jednostki
frpozwala głównej treści i sidebarowi elastycznie zajmować dostępną przestrzeń. min-height: 100vhna kontenerze i1frdla wiersza z treścią główną zapewniają, że stopka jest wypchnięta na dół strony.- Media query łatwo zmienia układ na jednokolumnowy na mniejszych ekranach poprzez zmianę
grid-template-columnsigrid-template-areas.
Przykład 2: Galeria Zdjęć z Różnymi Rozmiarami
Grid świetnie nadaje się do tworzenia nieregularnych siatek, np. galerii, gdzie niektóre elementy zajmują więcej niż jedną komórkę. Użyjemy umieszczania opartego na liniach i span.
<div class="gallery">
<div class="item item-1"><img src="image1.jpg" alt="Image 1"></div>
<div class="item item-2"><img src="image2.jpg" alt="Image 2"></div>
<div class="item item-3"><img src="image3.jpg" alt="Image 3"></div>
<div class="item item-4"><img src="image4.jpg" alt="Image 4"></div>
<div class="item item-5"><img src="image5.jpg" alt="Image 5"></div>
<!-- ... więcej elementów ... -->
</div>.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
grid-auto-rows: 150px; /* Domyślna wysokość wiersza */
grid-auto-flow: dense; /* Wypełnianie luk */
gap: 10px;
}
.gallery .item img {
width: 100%;
height: 100%;
object-fit: cover; /* Aby obrazki wypełniały komórkę bez zniekształceń */
display: block; /* Usunięcie domyślnego marginesu pod obrazkiem */
}
/* Niektóre elementy zajmują więcej miejsca */
.item-1 {
grid-column: span 2; /* Zajmij 2 kolumny */
grid-row: span 2; /* Zajmij 2 wiersze */
}
.item-3 {
grid-column: span 1;
grid-row: span 2; /* Zajmij 2 wiersze */
}
.item-5 {
grid-column: span 2; /* Zajmij 2 kolumny */
grid-row: span 1;
}
Kluczowe punkty:
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));tworzy responsywną siatkę kolumn, które mają co najmniej 150px szerokości, ale mogą się rozciągać, aby wypełnić dostępną przestrzeń. Liczba kolumn dostosowuje się automatycznie do szerokości kontenera.grid-auto-rows: 150px;ustawia stałą wysokość dla automatycznie tworzonych wierszy.grid-auto-flow: dense;pomaga wypełnić luki, które mogą powstać przez elementy zajmujące różne rozmiary.object-fit: cover;na obrazkach zapewnia, że wypełniają one swoje komórki bez zniekształcania proporcji.- Nadpisując
grid-columnigrid-rowdla wybranych elementów, tworzymy nieregularny, ciekawy układ.
Przykład 3: Układ Formularza
Grid może uprościć tworzenie wyrównanych układów formularzy, gdzie etykiety i pola są w osobnych kolumnach.
<form class="form-grid">
<label for="name">Imię:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="message">Wiadomość:</label>
<textarea id="message" name="message"></textarea>
<button type="submit">Wyślij</button>
</form>.form-grid {
display: grid;
grid-template-columns: auto 1fr; /* Kolumna na etykiety, reszta na pola */
gap: 15px 10px; /* Odstęp pionowy i poziomy */
align-items: center; /* Wyrównaj etykiety i pola w pionie */
}
.form-grid label {
justify-self: end; /* Wyrównaj etykiety do prawej */
}
.form-grid textarea {
grid-column: 2 / 3; /* Textarea zajmuje tylko drugą kolumnę */
min-height: 80px;
}
.form-grid button {
grid-column: 1 / 3; /* Przycisk zajmuje obie kolumny */
justify-self: center; /* Wyśrodkuj przycisk */
margin-top: 10px;
padding: 10px 20px;
}
Kluczowe punkty:
- Siatka dwukolumnowa: pierwsza kolumna (
auto) dopasowuje się do szerokości najdłuższej etykiety, druga (1fr) zajmuje resztę miejsca na pola formularza. align-items: center;na kontenerze wyrównuje etykiety i pola input w pionie w ich wierszach.justify-self: end;na etykietach wyrównuje je do prawej strony w ich komórkach, tworząc ładne wyrównanie z polami.- Elementy takie jak
textareaczybuttonmogą łatwo obejmować wiele kolumn (grid-column: 1 / 3;lubgrid-column: 2 / 3;). justify-self: center;na przycisku centruje go pod formularzem.
Podsumowanie
CSS Grid Layout oferuje ogromną elastyczność w tworzeniu różnorodnych układów. Kluczem jest zrozumienie podstawowych koncepcji linii, ścieżek, obszarów oraz właściwości do definiowania siatki i umieszczania w niej elementów. Eksperymentowanie z różnymi właściwościami i ich kombinacjami pozwoli Ci tworzyć zaawansowane i responsywne layouty.