CSS Grid 基礎

開放

1.1 Grid Layout 的基本原則

CSS Grid Layout 是個超強大的工具,用來設計複雜且具有適應性的版面。它提供開發者一個二維的網格系統來放置元素,讓簡單或複雜的版面設計變得更簡單一些。讓我們來看看 CSS Grid 的基本概念和語法,不深入到特定屬性。

CSS Grid 的基本概念

  1. Grid 容器和 Grid 元素:
    • Grid 容器 是一個包含 display: grid 的元素。這個元素會變成網格的容器,而它的直接子元素會變成 Grid 元素。
    • Grid 元素 是 Grid 容器的直接子元素,它們被放置在網格中。
  2. 網格軸:
    • 主軸 (inline axis)塊軸 (block axis):Grid 支援兩個放置元素的軸 - 主軸和塊軸。預設上,主軸是水平的,塊軸是垂直的。
  3. 網格單元 (Grid Cells):
    • 網格單元 是由行和列交叉形成的基本區塊。每個 Grid 元素佔用一個或多個單元。
  4. 網格線 (Grid Lines):
    • 網格線 是分隔行和列的水平和垂直線。它們用來根據網格放置元素。
  5. 網格區域 (Grid Areas):
    • 網格區域 是由多個單元合併而成的命名區域。它們允許將單元分組,並在特定區域放置元素。

1.2 語法元素

CSS Grid 的主要語法元素

1. 創建 Grid 容器:

.container {
  display: grid; /* 或 display: inline-grid */
}

2. 定義網格結構:

CSS
.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* 定義三個不同寬度的列 */
  grid-template-rows: 50px 100px; /* 定義兩個不同高度的行 */
}

3. 使用 grid-area 合併單元:

CSS
.item1 {
  grid-area: 1 / 1 / 2 / 4; /* 元素佔據第一行和前三列 */
}

4. 自動放置元素:

CSS
.container {
  display: grid;
  grid-auto-rows: minmax(100px, auto); /* 設置行的最小高度 */
}

1.3 範例

使用 CSS Grid 的簡單版面:

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Example</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .item {
        background-color: lightblue;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

說明:

  • 容器 .container 設定了三個列,第一和第三個占據相同的空間比例,而第二個占兩倍的空間。
  • 設定了兩個固定高度的行。
  • 屬性 gap 設定了網格單元之間的距離。
1
任務
Frontend SELF TW,  等級 27課堂 0
上鎖
創建 Grid 容器
創建 Grid 容器
1
任務
Frontend SELF TW,  等級 27課堂 0
上鎖
Grid 行為
Grid 行為
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言