文章

CSS Grid 進階

發布於 更新於
作者 Ned Hsu 7 分鐘閱讀

CSS Grid 進階

在學習了 CSS Grid 的基礎知識後，接下來我們將深入了解其進階應用。進階使用 CSS Grid，可以更靈活地設計複雜的二維佈局，實現更具創意和響應性的網頁設計。

1. 網格佈局的進階屬性

  • grid-template: 是 grid-template-rows、grid-template-columns 和 grid-template-areas 的簡寫形式，可以同時設置這三個屬性。
    • 語法：grid-template: <rows> / <columns>;
    • 範例：
      1
2
3
4
5
6
7
8

      .container {
    display: grid;
    grid-template:
        "header header" 100px
        "sidebar main" 1fr
        "footer footer" 50px
        / 200px 1fr;
}
    • 上述語法定義了三行兩列的網格，並同時設置了網格區域的名稱和大小。
    header
    sidebar
    main
    footer
  • grid-auto-flow: 控制自動放置算法的工作方式，定義如何自動排列未指定位置的網格項目。
    • 值：
      • row：項目按行順序自動排列（默認）。
      • column：項目按列順序自動排列。
      • dense：密集模式，會自動填充因移除或重新排列項目而留下的空白。
      • 範例：
        1
2
3
4

        .container {
  display: grid;
  grid-auto-flow: row dense; /* 先按行排列，並填補所有空格 */
}
      item 1
      item 2
      item 3
      item 4
  • grid-auto-columns 和 grid-auto-rows: 定義自動生成的列和行的大小。
    • 範例：
      1
2
3
4

      .container {
    display: grid;
    grid-auto-rows: 100px; /* 每新增一行自動設置高度為 100px */
}
      item 1
      item 2
      item 3
      item 4

2. 重複和自適應的佈局

  • repeat() 函數: 用來定義重複的列或行。
    • 語法：repeat(<count>, <track-size>)。
    • 範例：
      1
2
3
4

      .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 創建 3 列，每列寬度為 1fr */
}
    item 1
    item 2
    item 3
    item 4
  • minmax() 函數: 定義列或行的最小和最大大小，實現自適應佈局。
    • 語法：minmax(<min>, <max>)。
    • 範例：
      1
2
3
4

      .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr)); /* 每列最小 200px，最大為 1fr */
}
    item 1
    item 2
    item 3
    item 4
  • auto-fit 和 auto-fill: 自動填充模式，用於自動調整列數和行數以適應可用空間。
    • auto-fit：將所有網格軌道（行或列）壓縮，以便它們填充容器。
    • auto-fill：保留空白的軌道，避免壓縮。
    • 範例：
      1
2
3
4

      .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自動調整列數，寬度介於 150px 到 1fr */
}
    item 1
    item 2
    item 3
    item 4

3. 自動排列和網格對齊

  • justify-items 和 align-items: 控制網格項目在其單元格內的水平和垂直對齊。
    • justify-items: start、end、center、stretch。
    • align-items: start、end、center、stretch。
    • 範例：
      1
2
3
4
5

      .container {
    display: grid;
    justify-items: center; /* 項目在單元格內水平居中 */
    align-items: center; /* 項目在單元格內垂直居中 */
}
    item 1-1
    item 1-2
    item 1-3
    item 1-4
    item 2-1
    item 2-2
    item 2-3
    item 2-4
  • justify-content 和 align-content: 控制整個網格內容在容器內的水平和垂直對齊。
    • justify-content: 控制網格內容在水平方向上的對齊方式。
    • align-content: 控制網格內容在垂直方向上的對齊方式。
    • 範例：
      1
2
3
4
5

      .container {
    display: grid;
    justify-content: space-between; /* 網格內容在容器內水平分佈 */
    align-content: center; /* 網格內容在容器內垂直居中 */
}
    item 1-1
    item 1-2
    item 1-3
    item 1-4
    item 2-1
    item 2-2
    item 2-3
    item 2-4

4. 區域命名和重疊

  • 命名網格區域：通過 grid-template-areas 屬性命名網格區域，並使用 grid-area 在 CSS 中簡單地放置網格項目。
    • 範例：
      1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

      .container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header {
    grid-area: header;
}
.sidebar {
    grid-area: sidebar;
}
.main {
    grid-area: main;
}
.footer {
    grid-area: footer;
}
  • 網格項目重疊: 使用 grid-row 和 grid-column 屬性來創建重疊效果。
    • 範例：
      1
2
3
4
5
6
7
8
9

      .item1 {
    grid-column: 1 / 3; /* 項目橫跨第一到第三列 */
    grid-row: 1 / 2; /* 項目在第一行 */
}

.item2 {
    grid-column: 2 / 4; /* 項目橫跨第二到第四列 */
    grid-row: 1 / 2; /* 項目在第一行 */
}
    header
    sidebar
    main
    footer

5. 創建更複雜的佈局

Grid 的進階屬性和技巧可以用來創建更複雜的佈局，如：

  • 卡片式佈局：通過 repeat() 和 minmax() 函數來自動調整卡片的大小和數量，以適應不同的屏幕尺寸。
  • 儀表板佈局：將不同的組件（如導航欄、內容區域、側邊欄等）放置在固定的網格區域內，使佈局結構更加清晰。

6. 實踐範例：自適應畫廊

HTML:

1
2
3
4
5
6
7

<div class="gallery">
  <div class="gallery-item">Item 1</div>
  <div class="gallery-item">Item 2</div>
  <div class="gallery-item">Item 3</div>
  <div class="gallery-item">Item 4</div>
  <div class="gallery-item">Item 5</div>
</div>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* 自動調整列數 */
    gap: 20px; /* 項目之間的間距 */
}

.gallery-item {
    background-color: #e0e0e0;
    padding: 20px;
    border: 1px solid #ddd;
    text-align: center;
    font-size: 1.2em;
}
Item 1
Item 2
Item 3
Item 4
Item 5

7. 小結

CSS Grid 的進階屬性和技術使網頁設計師能夠創建更靈活和動態的佈局。通過使用 repeat()、minmax()、auto-fit 等函數，以及學會控制網格對齊和重疊，可以實現更具創意和適應性的設計。Grid 的強大功能使其成為當前最流行和強大的佈局工具之一。掌握這些技巧可以幫助你更好地應對各種複雜的網頁佈局需求。

Software, CSS
CSS
本文章以 CC BY 4.0 授權