高級 CSS 網格技術

第 10 講：進階 CSS 網格技術

歡迎來到《從基礎到輝煌》課程第十講。在本次講座中，我們將深入研究高階 CSS 網格技術。這些技術將使您能夠創建更複雜且響應更快的佈局。在本講座結束時，您將能夠使用網格區域、網格自動放置，並將 CSS 網格與 Flexbox 等其他佈局系統結合。

---

1.網格區域

網格區域可讓您為網格的各個部分指定名稱，從而更輕鬆地管理和視覺化佈局。

• 範例：為具有頁首、側邊欄、內容和頁腳的版面配置命名網格區域。

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

在此範例中：

• 網格區域：grid-template-areas 屬性定義了一個包含三個部分的佈局：跨越兩列的標題、中間的側邊欄和主要內容以及頁腳。
• 透過將網格項目（標題、側邊欄等）指派給特定區域，您可以更有效地控製版面。

---

2.網格自動放置

CSS 網格具有自動放置功能，可在未明確放置網格項目時自動定位網格項目。您可以使用 grid-auto-flow 來控制其運作方式。

• 價值觀：

  • row：項目逐行放置（預設）。
  • 列：項目按列放置。
  • 密集：項目將被打包到網格中的空白空間。

• 範例：
  
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense; /* Auto-places items and packs them densely */
  }

在這種情況下，網格項目將逐行放置，較小的項目將填充任何間隙。

---

3.使用 minmax() 函數

minmax() 函數可讓您定義網格軌道的範圍，例如指定網格軌道可以採用的最小和最大尺寸。

• 範例：

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

在此範例中：

• 網格有三列。
• 每列至少有 150 像素寬，但可以增長以填滿可用空間 (1fr)。

---

4.網格自動填入與自動調整

自動填充和自動調整都用於建立動態網格，但它們的工作方式略有不同：

• 自動填入：增加盡可能多的列，即使它們是空的。

• 自動調整：縮小或增加列以適應可用空間。

• 範例：自動調整和自動填充比較。
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Auto-fill */
  }

  .grid-container-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Auto-fit */
  }

兩個選項都會根據可用空間自動調整列數，但自動調整會折疊空列。

---

5.將 CSS 網格與 Flexbox 結合

雖然 CSS Grid 非常適合建立整體佈局，但 Flexbox 非常適合控制單一專案內的對齊方式。您可以將兩者結合起來處理佈局的不同部分。

• 範例：使用 CSS Grid 作為主佈局，使用 Flexbox 來對齊網格項目內的內容。

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="content">
    <div class="flexbox-item">Item 1</div>
    <div class="flexbox-item">Item 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flexbox-item {
  padding: 20px;
  background-color: #ddd;
}

在此範例中：

• 網格佈局：整體版面採用 CSS 網格結構，包含頁首、內容和頁尾。
• Flexbox：內容部分使用 Flexbox 來對齊其中的項目。

---

6.隱式網格與明確網格

網格可以明確定義（使用 grid-template-columns 和 grid-template-rows）或隱式定義（自動建立新軌道）。

• 明確網格：您定義行數和列數。

• 隱式網格：網格會自動建立行或列以容納額外的項目。

• 範例：
  

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px; /* Implicitly adds rows */
  }

在這種情況下，如果新增的項目多於定義的列，網格將自動建立新行。

---

7.建立全頁網格版面配置

讓我們使用 CSS Grid 建立一個帶有頁眉、主要內容區域、側邊欄和頁腳的響應式全頁佈局。

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main-content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh; /* Full height layout */
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f4f4f4;
  padding: 20px;
}

.main-content {
  grid-area: main;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

在此範例中：

• Grid Areas: The layout consists of a header, sidebar, main content, and footer.
• The grid adjusts the height of each section automatically, filling the full viewport height.

---

Practice Exercise

1. Create a responsive blog layout with a header, sidebar, main content, and footer using CSS Grid.
2. Use grid-template-areas to define the structure.
3. Make the layout responsive by adjusting the number of columns on different screen sizes.

---

Next Up: In the next lecture, we’ll explore CSS Positioning and how to position elements using properties like absolute, relative, and fixed. Get ready to enhance your layout control even further!

---

follow me on LinkedIn

Ridoy Hasan

以上是高級 CSS 網格技術的詳細內容。更多資訊請關注PHP中文網其他相關文章！