CSS Grid 實戰範例，快速打造網頁儀表板

08 October 2023

建立 HTML 結構

首先，建立一個新的 HTML 檔案，並添加基本的 HTML 結構。這將包括一個帶有 grid-container class 的 div，作為主要網格容器。在這個 div 內部，將放置所有其他的區塊，如標頭、側邊欄、主要內容等。

這個結構設計讓整個頁面成為一個統一的網格系統，每個區塊都可以透過 CSS Grid 精確定位。

<!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 檔案

接下來，我們需要建立一個 CSS 檔案來存放所有的樣式規則。

建立一個名為 styles.css 的新 CSS 檔案，這是我們添加所有樣式的地方。

整個專案的檔案結構很簡單，只需要兩個檔案：

index.html：包含 HTML 結構
styles.css：包含所有 CSS 樣式規則

定義主要的 CSS Grid

這一步是設置網格佈局的核心，我們將在這裡定義主要的網格容器。在 styles.css 檔案中，定義 .grid-container 類別，這樣就能設定好整個儀表板的網格佈局。

這個網格容器將使用 grid-template-areas 屬性來定義各個區域的位置，讓佈局更加清晰易懂。

/* 主要的網格容器 */
.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% */
}

添加標頭與頂部導航樣式

標頭和頂部導航是網站的重要組成部分，通常包含網站標題、Logo 和主要導航選單。這一部分將示範如何為它們添加樣式，並透過 grid-area 屬性將它們放置在正確的網格區域中。

/* 標頭部分 */
.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）和右側邊欄（extra-content）分別佔據不同的網格區域，可以根據需求放置不同的內容。

/* 側邊欄部分 */
.sidebar {
  grid-area: sidebar;
  background-color: #FFC107;
  padding: 10px;
}
/* 額外內容部分 */
.extra-content {
  grid-area: extra-content;
  background-color: #009688;
  padding: 10px;
}

添加主要內容樣式

主要內容是網站的核心部分，這裡我們將展示 CSS Grid 的嵌套功能。在主要內容區域內，我們可以建立另一個網格系統，用來排列內部的小部件。

/* 主要內容部分 */
.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 queries）讓佈局適應不同的螢幕大小，確保在手機、平板和桌面裝置上都能有良好的顯示效果。

/* 響應式設計 */
@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;
  }
}