10.1 Kombinowanie z media queries
CSS Grid Layout dostarcza świetne narzędzia do tworzenia złożonych i responsywnych układów. Kombinowanie CSS Grid z media queries pozwala tworzyć układy, które dostosowują się do różnych rozmiarów ekranów i urządzeń. Zobaczmy, jak używać media queries razem z CSS Grid do tworzenia elastycznych i responsywnych stron web.
Podstawowe pojęcia media queries
Media queries pozwalają stosować różne style CSS w zależności od cech urządzenia, takich jak szerokość ekranu, wysokość ekranu, orientacja ekranu i inne. W połączeniu z CSS Grid, media queries pozwalają zmieniać strukturę i rozmieszczenie elementów w zależności od rozmiarów ekranu.
Składnia media queries:
@media (warunek) {
/* Style stosowane przy spełnieniu warunku */
}
Gdzie «warunek» — warunek, przy którym będą stosowane style.
Najczęściej używane są warunki związane z szerokością ekranu, takie jak max-width i min-width.
10.2 Zmiana liczby kolumn
Przykład pełnej implementacji (zmiana liczby kolumn w zależności od szerokości ekranu):
CSS
/* Podstawowy styl dla wszystkich ekranów */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Dla ekranów szerszych niż 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Dwie kolumny */
}
}
/* Dla ekranów szerszych niż 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Trzy kolumny */
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptacyjny układ z 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 class="grid-item">Element 5</div>
<div class="grid-item">Element 6</div>
</div>
</body>
</html>
Wyjaśnienie kodu:
- Podstawowy styl: tworzy kontener Grid z jedną kolumną dla wszystkich ekranów
- Media query dla ekranów szerszych niż 600px: zmienia układ na dwie kolumny
- Media query dla ekranów szerszych niż 900px: zmienia układ na trzy kolumny
10.3 Zależność od szerokości ekranu
Przykład pełnej implementacji (zmiana rozmieszczenia elementów w zależności od szerokości ekranu):
CSS
/* Podstawowy styl dla wszystkich ekranów */
.grid-container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
padding: 20px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background-color: #3498db;
padding: 20px;
text-align: center;
}
.main {
grid-area: main;
background-color: #9b59b6;
padding: 20px;
text-align: center;
}
.footer {
grid-area: footer;
background-color: #e74c3c;
padding: 20px;
text-align: center;
}
/* Dla ekranów szerszych niż 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* Dla ekranów szerszych niż 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 1fr 2fr;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptacyjne rozmieszczenie z CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Wyjaśnienie kodu:
- Podstawowy styl: tworzy kontener Grid z czterema wierszami i jedną kolumną dla wszystkich ekranów
- Media query dla ekranów szerszych niż 600px: zmienia układ na dwie kolumny i zmienia rozmieszczenie obszarów: nagłówek zajmuje dwie kolumny, główna treść i panel boczny zajmują po jednej kolumnie, stopka zajmuje dwie kolumny
- Media query dla ekranów szerszych niż 900px: zmienia układ na trzy kolumny i zmienia rozmieszczenie obszarów: nagłówek zajmuje trzy kolumny, główna treść i panel boczny zajmują po jednej i dwie kolumny odpowiednio, stopka zajmuje trzy kolumny
10.4 Zmiana rozmiarów elementów
Przykład pełnej implementacji (zmiana rozmiarów elementów w zależności od szerokości ekranu):
CSS
/* Podstawowy styl dla wszystkich ekranów */
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
gap: 10px;
}
.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
border: 1px solid #fff;
}
/* Dla ekranów szerszych niż 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* Dla ekranów szerszych niż 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adaptacyjne rozmiary z CSS Grid</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:
- Podstawowy styl: tworzy kontener Grid z dwoma kolumnami i automatycznymi wierszami o wysokości
100pxdla wszystkich ekranów - Media query dla ekranów szerszych niż 600px: zmienia układ na trzy kolumny i zwiększa wysokość wierszy do
150px - Media query dla ekranów szerszych niż 900px: zmienia układ na cztery kolumny i zwiększa wysokość wierszy do
200px
GO TO FULL VERSION