10.1 Kết hợp với media query
CSS Grid Layout cung cấp các công cụ xịn sò để tạo ra các layout phức tạp và linh hoạt. Kết hợp CSS Grid với media query cho phép tạo ra các layout có thể điều chỉnh cho các kích thước màn hình và thiết bị khác nhau. Hãy cùng khám phá cách sử dụng media query với CSS Grid để tạo ra các trang web linh hoạt và thích ứng.
Khái niệm cơ bản về media query
Media query cho phép áp dụng các style CSS khác nhau tùy thuộc vào đặc điểm của thiết bị, chẳng hạn như chiều rộng màn hình, chiều cao màn hình, hướng màn hình và nhiều yếu tố khác. Khi kết hợp với CSS Grid, media query cho phép thay đổi cấu trúc và bố cục phần tử dựa trên kích thước màn hình.
Cú pháp media query:
@media (điều kiện) {
/* Các style được áp dụng khi điều kiện thỏa mãn */
}
Trong đó «điều kiện» là điều kiện mà khi nó thỏa mãn thì các style sẽ được áp dụng. Thường thì các điều kiện liên quan đến chiều rộng màn hình, chẳng hạn như max-width và min-width.
10.2 Thay đổi số lượng cột
Ví dụ hoàn chỉnh (thay đổi số lượng cột dựa trên chiều rộng màn hình):
CSS
/* Style cơ bản cho tất cả các màn hình */
.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;
}
/* Cho màn hình rộng hơn 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(2, 1fr); /* Hai cột */
}
}
/* Cho màn hình rộng hơn 900px */
@media (min-width: 900px) {
.grid-container {
grid-template-columns: repeat(3, 1fr); /* Ba cột */
}
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bố cục thích ứng với CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item">Phần tử 1</div>
<div class="grid-item">Phần tử 2</div>
<div class="grid-item">Phần tử 3</div>
<div class="grid-item">Phần tử 4</div>
<div class="grid-item">Phần tử 5</div>
<div class="grid-item">Phần tử 6</div>
</div>
</body>
</html>
Giải thích mã:
- Style cơ bản: tạo một container Grid với một cột cho tất cả các màn hình
- Media query cho màn hình rộng hơn 600px: thay đổi layout thành hai cột
- Media query cho màn hình rộng hơn 900px: thay đổi layout thành ba cột
10.3 Phụ thuộc vào chiều rộng màn hình
Ví dụ hoàn chỉnh (thay đổi việc bố trí phần tử dựa trên chiều rộng màn hình):
CSS
/* Style cơ bản cho tất cả các màn hình */
.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;
}
/* Cho màn hình rộng hơn 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 3fr;
}
}
/* Cho màn hình rộng hơn 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>Bố trí thích ứng với 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>
Giải thích mã:
- Style cơ bản: tạo một container Grid với bốn hàng và một cột cho tất cả các màn hình
- Media query cho màn hình rộng hơn 600px: thay đổi layout thành hai cột và thay đổi bố trí các vùng: header chiếm hai cột, nội dung chính và sidebar chiếm một cột mỗi, footer chiếm hai cột
- Media query cho màn hình rộng hơn 900px: thay đổi layout thành ba cột và thay đổi bố trí các vùng: header chiếm ba cột, nội dung chính và sidebar chiếm một và hai cột tương ứng, footer chiếm ba cột
10.4 Thay đổi kích thước phần tử
Ví dụ hoàn chỉnh (thay đổi kích thước phần tử dựa trên chiều rộng màn hình):
CSS
/* Style cơ bản cho tất cả các màn hình */
.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;
}
/* Cho màn hình rộng hơn 600px */
@media (min-width: 600px) {
.grid-container {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 150px;
}
}
/* Cho màn hình rộng hơn 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>Kích thước thích ứng với CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">Phần tử 1</div>
<div class="grid-item item2">Phần tử 2</div>
<div class="grid-item item3">Phần tử 3</div>
<div class="grid-item item4">Phần tử 4</div>
<div class="grid-item item5">Phần tử 5</div>
<div class="grid-item item6">Phần tử 6</div>
</div>
</body>
</html>
Giải thích mã:
- Style cơ bản: tạo một container Grid với hai cột và các hàng tự động với chiều cao
100pxcho tất cả các màn hình - Media query cho màn hình rộng hơn 600px: thay đổi layout thành ba cột và tăng chiều cao hàng lên
150px - Media query cho màn hình rộng hơn 900px: thay đổi layout thành bốn cột và tăng chiều cao hàng lên
200px
GO TO FULL VERSION