10.1 Media query-lərlə kombinasiyalar
CSS Grid Layout ilə mürəkkəb və adaptiv layoutlar yaratmaq üçün əla vasitələr təqdim edir. CSS Grid-i media query-lərlə kombinə etmək müxtəlif ekran ölçülərinə və cihazlara uyğunlaşan layoutlar yaratmağa imkan verir. Gəlin CSS Grid-dən media query-lərlə birlikdə necə istifadə edəcəyimizi və elastik, adaptiv veb səhifələr yaratmağı öyrənək.
Media query-lərin əsas konseptləri
Media query-lər cihazların xüsusiyyətlərinə (məsələn, ekranın eni, ekranın hündürlüyü, ekranın orientasiyası və s.) uyğun olaraq müxtəlif CSS stillərini tətbiq etməyə imkan verir. CSS Grid ilə kombinasiyada media query-lər ekran ölçülərinə uyğun olaraq elementlərin strukturunu və yerləşməsini dəyişməyə imkan verir.
Media query-lərin sintaksisi:
@media (şərt) {
/* Şərt yerinə yetirildikdə tətbiq olunan stillər */
}
Burada «şərt» — stillərin tətbiq olunduğu şərtdir. Ən çox istifadə olunan şərtlər, ekranın eni ilə bağlı olanlardır, məsələn, max-width və min-width.
10.2 Sütun sayının dəyişdirilməsi
Daxili reallaşdırmanın nümunəsi (ekranın eni ilə əlaqədar sütun sayını dəyişdirmək):
CSS
/* Bütün ekranlar üçün əsas stil */
.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-dən böyük olan ekranlar üçün */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* İki sütun */
}
}
/* 900px-dən böyük olan ekranlar üçün */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Üç sütun */
}
}
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 ilə Responsiv Layout</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>
Kodun izahı:
- Əsas stil: bütün ekranlar üçün bir sütunlu Grid konteyneri yaradır
- 600px-dən böyük ekranlar üçün media sorğusu: layout iki sütunlu olur
- 900px-dən böyük ekranlar üçün media sorğusu: layout üç sütunlu olur
10.3 Ekran enindən asılılıq
Tam tətbiqun nümunəsi (elementlərin yerləşməsinin ekran eninə görə dəyişdirilməsi):
CSS
/* Bütün ekranlar üçün əsas stil */
.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-dən geniş ekranlar üçün */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* 900px-dən geniş ekranlar üçün */
@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 ilə adaptiv yerləşdirmə</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">Əsas Məzmun</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
Kodun izahı:
- Əsas stil: bütün ekranlar üçün Grid konteyneri yaradır, dörd sıra və bir sütun ilə
- 600px-dən geniş ekranlar üçün media sorğusu: layout-u iki sütuna dəyişir və bölgələrin yerləşməsini dəyişir: başlıq iki sütun tutur, əsas məzmun və yan panel hər biri bir sütun tutur, footer iki sütun tutur
- 900px-dən geniş ekranlar üçün media sorğusu: layout-u üç sütuna dəyişir və bölgələrin yerləşməsini dəyişir: başlıq üç sütun tutur, əsas məzmun və yan panel hər biri bir və iki sütun tutur, footer üç sütun tutur
10.4 Elementlərin ölçülərinin dəyişdirilməsi
Elementlərin ekranın enindən asılı olaraq ölçülərinin dəyişilməsi (tam realizasiya nümunəsi):
CSS
/* Bütün ekranlar üçün əsas stil */
.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-dən geniş ekranlar üçün */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* 900px-dən geniş ekranlar üçün */
@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 ilə adaptiv ölçülər</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>
Kodun izahı:
- Əsas stil: bütün ekranlarda iki sütunlu və avtomatik olaraq
100pxhündürlükdə sətirlər olan Grid konteyneri yaradır - 600px-dən geniş ekranlar üçün media-sorğu: maketi üç sütuna dəyişir və sətir hündürlüyünü
150pxqədər artırır - 900px-dən geniş ekranlar üçün media-sorğu: maketi dörd sütuna dəyişir və sətir hündürlüyünü
200pxqədər artırır
GO TO FULL VERSION