9.1 屬性 grid-template-areas
CSS Grid Layout 提供強大的功能來創建複雜的佈局，通過 具名區域
(grid areas)。屬性 grid-template-areas 允許設置格子區域，可以用來
簡化元素的放置。這個屬性讓開發者可以直觀地組織佈局並使其維護更加容易。
grid-template-areas 的基本概念
-
定義區域：
- 屬性
grid-template-areas允許為不同的格子區域命名 - 每個區域名稱代表一個矩形的單元格組
- 屬性
-
使用具名區域：
-
可以使用已定義的區域來放置元素，為每個元素設置屬性
grid-area
-
可以使用已定義的區域來放置元素，為每個元素設置屬性
grid-template-areas 的語法:
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer"
}
Grid 元素的語法:
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}
說明：
- 每一行在
grid-template-areas的值中代表一個格子行 - 每個單詞在行中代表一個單元格或單元格組
- 可以使用點 (.) 來表示空的單元格
9.2 使用 grid-template-areas 的範例
完整實現範例：
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-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;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Areas 範例</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-container: 使用display: grid定義 Grid 容器，並使用grid-template-areas設置格子佈局。在這個例子中，佈局由三行組成：第一行是標題，第二行 包含側邊欄和主要內容，第三行是頁腳 -
.header,.sidebar,.main,.footer: 定義不同 格子區域的樣式，並通過grid-area屬性把這些區域與grid-template-areas中的名稱連接起來
9.3 管理空白區域
屬性 grid-template-areas 允許使用點（.）來表示空白區域，保持區域空白。
完整實現範例：
CSS
.grid-container {
display: grid;
grid-template-areas:
"header header header"
". main ."
"footer footer footer";
grid-gap: 10px;
}
.header {
grid-area: header;
background-color: #2ecc71;
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;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>空白區域 Grid Areas</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="grid-container">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
</body>
</html>
代碼說明：
-
.grid-container: 創建 Grid 容器，其中包含三個區域：標題、主要內容和頁腳。 中間行在主要內容的左右兩側留有空白區域 -
.header,.main,.footer: 定義區域的樣式並將其與grid-template-areas中的名稱連接
GO TO FULL VERSION