Table of Contents
CSS Grid 是一種現代的網頁佈局工具，它就像一個巨大的棋盤，讓你能輕鬆地在網頁上安排各種元素。
這個棋盤由多個列和行組成，你可以自由地調整它們的大小。每個放在這個棋盤上的元素都是一個網格項目，你可以將它們放在任何你想要的位置。
更進一步地，你還可以劃出大的網格區域來放置小網格，這對於創建複雜的佈局非常有用。
CSS Grid 也非常適合進行響應式設計，因為你可以輕易地調整列和行的配置來適應不同大小的螢幕。一旦你熟悉了基本規則，使用 CSS Grid 來設計網頁會變得非常簡單和直觀。
以下步驟將會示範一個完整的儀表板網頁，只使用 CSS Grid。
建立 HTML 結構
首先，建立一個新的 HTML 檔案，並添加基本的 HTML 結構。這將包括一個帶有 grid-container class 的 div，將作為主要網格容器。在這個 div 內部，將放置所有其他的區塊，如標頭、側邊欄等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高級管理儀表板示例</title>
<!-- 連接外部 CSS 檔案 -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- 整個佈局的主要網格容器 -->
<div class="grid-container">
<!-- 標頭部分 -->
<header class="header">標頭</header>
<!-- 頂部導航部分 -->
<nav class="top-nav">頂部導航</nav>
<!-- 側邊欄部分 -->
<aside class="sidebar">側邊欄</aside>
<!-- 主要內容部分 -->
<main class="main-content">
<!-- 主要內容內的單個小部件 -->
<div class="widget1">小部件 1</div>
<div class="widget2">小部件 2</div>
<div class="widget3">小部件 3</div>
<div class="widget4">小部件 4</div>
</main>
<!-- 額外內容部分 -->
<section class="extra-content">額外內容</section>
<!-- 通知部分 -->
<section class="notifications">通知</section>
<!-- 頁腳部分 -->
<footer class="footer">頁腳</footer>
</div>
</body>
</html>建立 CSS 檔案
接下來，需要一個地方來存放所有的樣式規則。
建立一個名為 styles.css 的新 CSS 檔案，這是添加所有樣式的地方。
檔案結構很簡單，只有 index.html 和 styles.css
定義主要的 CSS Grid
這一步是設置網格佈局的核心，這裡會定義一個網格容器。 在您的 styles.css 檔案中，定義 .grid-container 類，這樣就設定好儀表板的網格佈局。
/* 主要的網格容器 */
.grid-container {
display: grid;
grid-template-columns: 0.5fr 2fr 0.5fr;
grid-template-rows: 50px 50px 1fr 50px 50px;
grid-template-areas:
"header header header"
"top-nav top-nav top-nav"
"sidebar main-content extra-content"
"sidebar notifications extra-content"
"footer footer footer";
gap: 10px; /* 網格項目之間的間隙 */
height: 100vh; /* 容器的高度設為視窗的100% */
}添加標頭與頂部導航樣式
標頭和頂部導航是網站的臉面，這一部分將示範如何為它們添加樣式。
/* 標頭部分 */
.header {
grid-area: header; /* 網格區域名稱 */
background-color: #4CAF50; /* 背景顏色 */
text-align: center; /* 文字置中 */
padding: 10px; /* 內邊距 */
}
/* 頂部導航部分 */
.top-nav {
grid-area: top-nav;
background-color: #2196F3;
text-align: center;
padding: 10px;
}添加左右側邊欄樣式
側邊欄通常用於導航或顯示額外信息。
/* 側邊欄部分 */
.sidebar {
grid-area: sidebar;
background-color: #FFC107;
padding: 10px;
}
/* 額外內容部分 */
.extra-content {
grid-area: extra-content;
background-color: #009688;
padding: 10px;
}添加主要內容樣式
主要內容是網站的核心部分。
/* 主要內容部分 */
.main-content {
grid-area: main-content;
background-color: #f9f9f9;
display: grid; /* 設置為網格容器 */
grid-template-columns: 1fr 2fr; /* 子網格的列設計 */
grid-template-rows: repeat(2, 1fr); /* 子網格的行設計 */
gap: 10px; /* 子網格項目之間的間隙 */
}添加小部件樣式
小部件可以是任何額外的元素，如按鈕或卡片。
/* 小部件 */
.widget1, .widget2, .widget3, .widget4 {
padding: 10px;
text-align: center;
}
.widget1 { background-color: #E91E63; }
.widget2 { background-color: #9C27B0; }
.widget3 { background-color: #673AB7; }
.widget4 { background-color: #3F51B5; }添加通知頁腳部分樣式
頁腳通常包含版權信息或其他重要連結。
/* 通知部分 */
.notifications {
grid-area: notifications;
background-color: #8BC34A;
text-align: center;
padding: 10px;
}
/* 頁腳部分 */
.footer {
grid-area: footer;
background-color: #795548;
text-align: center;
padding: 10px;
}加上響應式設計
隨著多種螢幕大小的出現，響應式設計變得越來越重要。這裡示範如何使佈局適應不同的螢幕大小。
/* 響應式設計 */
@media (max-width: 768px) {
.grid-container {
/* 調整移動設備的網格佈局 */
grid-template-columns: 1fr;
grid-template-rows: 50px 50px auto auto auto auto 50px;
grid-template-areas:
"header"
"top-nav"
"sidebar"
"main-content"
"extra-content"
"notifications"
"footer";
}
/* 調整側邊欄、額外內容和通知為全寬 */
.sidebar, .extra-content, .notifications {
grid-column: 1 / -1;
}
}測試佈局
最後
通過本範例，您可以學到以下幾點：
網格容器的設置：了解如何設置主要的網格容器，包括如何定義列和行的大小。
網格區域的應用：範例展示了如何使用 grid-template-areas 屬性來創建網格區域，這對於佈局的組織非常有用。
元素的定位：了解如何使用 grid-area 屬性來定位網格項目，使它們出現在您想要的網格區域內。
嵌套網格：在主要內容區域中，會看到一個嵌套的網格，這展示了如何在一個網格容器內創建另一個網格。
樣式和間距：範例還包括了如何添加背景顏色、內邊距和文字對齊等基本樣式。
響應式設計：透過 media queries，了解如何調整網格佈局以適應不同大小的螢幕。
全寬元素：在響應式部分，您會學到如何使某些網格項目在小螢幕上變為全寬。
這個範例是一個很好的起點，讓您瞭解 CSS Grid 的基本功能和應用，並且提供了實用的技巧來創建自己的網頁佈局。
更多參考內容
