標籤「Grid」的 1 篇文章

這篇備忘錄記錄了 CSS Grid。

1. 核心概念​

• 網格容器 (Grid Container)：應用 display: grid 或 display: inline-grid 的元素。
• 網格項目 (Grid Items)：網格容器的直接子元素。
• 網格線 (Grid Lines)：構成網格的水平和垂直分隔線。
• 網格軌道 (Grid Tracks)：網格線之間的空間，可以是行 (grid-row) 或列 (grid-column)。
• 網格單元 (Grid Cells)：一個網格軌道交叉形成的最小單位。
• 網格區域 (Grid Areas)：由多個網格單元組成的矩形區域。

2. 創建網格容器​

要創建一個網格佈局，首先將元素的 display 屬性設置為 grid 或 inline-grid。

.container {
  display: grid;
  /* 其他網格屬性 */
}

3. 定義網格軌道 (行和列)​

grid-template-columns 和 grid-template-rows​

這些屬性定義了網格的列和行的數量和大小。

• 固定大小：使用 px, em, rem, % 等單位。

  .container {
    grid-template-columns: 100px 200px auto; /* 三列：100px, 200px, 剩餘空間 */
    grid-template-rows: 50px 1fr; /* 兩行：50px, 剩餘空間 */
  }
  

• fr 單位 (Fraction)：表示網格容器中可用空間的比例。

  .container {
    grid-template-columns: 1fr 2fr 1fr; /* 三列，比例為 1:2:1 */
  }
  

• repeat() 函數：用於重複定義軌道。

  .container {
    grid-template-columns: repeat(3, 1fr); /* 創建三列，每列佔用相同比例的空間 */
    grid-template-rows: repeat(2, 100px); /* 創建兩行，每行 100px */
  }
  

• minmax() 函數：設置軌道大小的最小和最大值。

  .container {
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 每列最小 100px，最大 1fr */
  }
  

4. 網格項目放置​

根據網格線放置​

• grid-column-start, grid-column-end, grid-row-start, grid-row-end
• 簡寫：grid-column, grid-row

.item1 {
  grid-column-start: 1; /* 從第 1 條垂直網格線開始 */
  grid-column-end: 3;   /* 在第 3 條垂直網格線結束 (佔用第 1 和第 2 列) */
  /* 或者簡寫：grid-column: 1 / 3; */

  grid-row: 1 / span 2; /* 從第 1 條水平網格線開始，跨越 2 行 */
}

根據網格區域放置​

1. 定義網格區域：使用 grid-template-areas 在網格容器上定義具名區域。

   .container {
     grid-template-areas:
       "header header header"
       "nav    main   aside"
       "footer footer footer";
   }
   

2. 將項目放置到區域：使用 grid-area 屬性將網格項目分配給這些區域。

   .header { grid-area: header; }
   .nav    { grid-area: nav;    }
   .main   { grid-area: main;   }
   .aside  { grid-area: aside;  }
   .footer { grid-area: footer; }
   

5. 網格間距 (Gutters)​

使用 gap, row-gap, column-gap 設置網格軌道之間的間距。

.container {
  gap: 10px; /* 行間距和列間距都是 10px */
  /* 或者分別設置 */
  /* row-gap: 10px; */
  /* column-gap: 15px; */
}

6. 對齊內容​

容器級對齊 (對齊網格內的網格項目)​

• justify-items (水平方向)
• align-items (垂直方向)
• 簡寫：place-items

值：start, end, center, stretch (默認)

.container {
  justify-items: center; /* 所有項目在網格單元中水平居中 */
  align-items: center;   /* 所有項目在網格單元中垂直居中 */
}

項目級對齊 (對齊單個網格項目)​

• justify-self (水平方向)
• align-self (垂直方向)
• 簡寫：place-self

值：start, end, center, stretch (默認)

.item1 {
  justify-self: end; /* 在其網格單元中水平靠右 */
  align-self: start; /* 在其網格單元中垂直靠上 */
}

對齊網格軌道 (當網格容器有額外空間時)​

• justify-content (水平方向)
• align-content (垂直方向)
• 簡寫：place-content

值：start, end, center, stretch, space-around, space-between, space-evenly

.container {
  height: 500px; /* 確保容器有足夠的額外空間 */
  justify-content: space-around; /* 軌道之間和兩側均勻分佈空間 */
  align-content: center;       /* 將所有行居中對齊 */
}

7. 總結​

CSS Grid Layout 是一個強大的二維佈局工具，它提供了一種直觀且靈活的方式來創建複雜的網頁佈局。通過理解其核心概念（容器、項目、軌道、線、區域）以及各種屬性（如 grid-template-areas、gap、對齊屬性），你可以設計出響應式且結構良好的網頁。