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
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ