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>
代碼說明：
- 基本樣式: 創建了一個包含兩列，自動行高為
100px的 Grid 容器，用於所有螢幕 - 寬度超過 600px 的螢幕的媒體查詢: 將版面更改為三列並增加行高至
150px - 寬度超過 900px 的螢幕的媒體查詢: 將版面更改為四列並增加行高至
200px
GO TO FULL VERSION