高級 CSS 網格技術-css教學-PHP中文網

Advanced CSS Grid Techniques

第 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

Create a responsive blog layout with a header, sidebar, main content, and footer using CSS Grid.
Use grid-template-areas to define the structure.
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中文網其他相關文章！