10.1 Комбінування з медіа-запитами
CSS Grid Layout надає круті інструменти для створення складних і адаптивних макетів. Комбінування CSS Grid з медіа-запитами дозволяє створювати макети, які адаптуються до різних розмірів екранів та пристроїв. Розгляньмо, як використовувати медіа-запити разом із CSS Grid для створення гнучких і адаптивних веб-сторінок.
Основні концепції медіа-запитів
Медіа-запити дозволяють застосовувати різні стилі CSS залежно від характеристик пристрою, таких як ширина екрану, висота екрану, орієнтація екрану та інші. У комбінації з CSS Grid, медіа-запити дозволяють змінювати структуру і розташування елементів залежно від розмірів екрану.
Синтаксис медіа-запитів:
@media (умова) {
/* Стилі, які застосовуються при виконанні умови */
}
Де «умова» — це умова, за якої будуть застосовуватися стилі. Найчастіше використовуються умови, пов’язані зі шириною екрану, такі як max-width і min-width.
10.2 Зміна кількості стовпців
Приклад повної реалізації (зміна кількості стовпців залежно від ширини екрану):
CSS
/* Базовий стиль для всіх екранів */
.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;
}
/* Для екранів ширше 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Два стовпці */
}
}
/* Для екранів ширше 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Три стовпці */
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Адаптивний макет з CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Елемент 1</div>
<div class="grid-item">Елемент 2</div>
<div class="grid-item">Елемент 3</div>
<div class="grid-item">Елемент 4</div>
<div class="grid-item">Елемент 5</div>
<div class="grid-item">Елемент 6</div>
</div>
</body>
</html>
Пояснення коду:
- Базовий стиль: створює контейнер Grid з одним стовпцем для всіх екранів
- Медіа-запит для екранів ширше 600px: змінює макет на два стовпці
- Медіа-запит для екранів ширше 900px: змінює макет на три стовпці
10.3 Залежність від ширини екрану
Приклад повної реалізації (зміна розташування елементів залежно від ширини екрану):
CSS
/* Базовий стиль для всіх екранів */
.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;
}
/* Для екранів ширше 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* Для екранів ширше 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>Адаптивне розташування з 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>
Пояснення коду:
- Базовий стиль: створює контейнер Grid з чотирма рядками та однією колонкою для всіх екранів
- Медіа-запит для екранів ширше 600px: змінює макет на два стовпці та змінює розташування областей: заголовок займає дві колонки, основний контент і бічна панель займають по одному стовпцю, підвал займає дві колонки
- Медіа-запит для екранів ширше 900px: змінює макет на три стовпці та змінює розташування областей: заголовок займає три колонки, основний контент і бічна панель займають по одному і два стовпці відповідно, підвал займає три колонки
10.4 Зміна розмірів елементів
Приклад повної реалізації (зміна розмірів елементів залежно від ширини екрану):
CSS
/* Базовий стиль для всіх екранів */
.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;
}
/* Для екранів ширше 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* Для екранів ширше 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>Адаптивні розміри з CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Елемент 1</div>
<div class="grid-item item2">Елемент 2</div>
<div class="grid-item item3">Елемент 3</div>
<div class="grid-item item4">Елемент 4</div>
<div class="grid-item item5">Елемент 5</div>
<div class="grid-item item6">Елемент 6</div>
</div>
</body>
</html>
Пояснення коду:
- Базовий стиль: створює контейнер Grid з двома стовпцями та автоматичними рядками висотою
100pxдля всіх екранів - Медіа-запит для екранів ширше 600px: змінює макет на три стовпці та збільшує висоту рядків до
150px - Медіа-запит для екранів ширше 900px: змінює макет на чотири стовпці та збільшує висоту рядків до
200px
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ