目錄

一、Grid布局基礎概念

1.1 網格容器與網格項

1.2 創建基本網格?

二、核心屬性詳解

2.1 定義網格軌道

2.2 網格間距控制

2.3 網格項對齊方式

三、實戰布局技巧

3.1 創建經典布局

3.2 網格項定位技巧

3.3 響應式網格設計

四、Grid布局 vs Flexbox布局

五、高級技巧與最佳實踐

5.1 隱式網格與顯式網格

?5.2 使用minmax()函數

5.3 層疊與z-index控制

5.4 子網格(subgrid)支持

六、瀏覽器支持與漸進增強

結語：擁抱Grid布局新時代

---

一、Grid布局基礎概念

1.1 網格容器與網格項

/* 創建網格容器 */
.container {display: grid; /* 或 inline-grid */
}

• 網格容器：應用display: grid的元素

• 網格項：網格容器的直接子元素

• 網格線：構成網格結構的水平線和垂直線

• 網格軌道：相鄰網格線之間的空間（行或列）

• 網格單元格：相鄰行列網格線交叉形成的空間

• 網格區域：任意矩形區域，由四條網格線界定

1.2 創建基本網格?

.container {display: grid;grid-template-columns: 100px 200px auto; /* 三列：固定100px, 固定200px, 自適應 */grid-template-rows: 100px 300px; /* 兩行：固定高度 */gap: 15px; /* 行列間距 */
}

二、核心屬性詳解

2.1 定義網格軌道

.container {/* 使用像素單位 */grid-template-columns: 200px 200px 200px;/* 使用fr單位（比例單位） */grid-template-columns: 1fr 2fr 1fr; /* 中間列是兩側的兩倍寬 *//* 使用repeat()函數 */grid-template-columns: repeat(4, 1fr); /* 創建四等分列 *//* 混合使用 */grid-template-columns: 200px repeat(2, 1fr) 300px;/* 自動行高 */grid-auto-rows: minmax(100px, auto);
}

2.2 網格間距控制

.container {gap: 20px; /* 行列間距相同 *//* 或分別設置 */row-gap: 15px;column-gap: 30px;
}

2.3 網格項對齊方式

/* 容器內對齊 */
.container {justify-items: center; /* 水平對齊 */align-items: end;     /* 垂直對齊 */place-items: center end; /* 簡寫形式 */
}/* 整個網格在容器中對齊 */
.container {justify-content: space-around;align-content: center;
}

三、實戰布局技巧

3.1 創建經典布局

.container {display: grid;grid-template-columns: 200px 1fr;grid-template-rows: 80px 1fr 100px;grid-template-areas:"header header""sidebar content""footer footer";height: 100vh;gap: 10px;
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

3.2 網格項定位技巧

.item {/* 使用行線和列線定位 */grid-column-start: 1;grid-column-end: 3;grid-row-start: 2;grid-row-end: 4;/* 簡寫形式 */grid-column: 1 / 3;grid-row: 2 / 4;/* 使用span關鍵字 */grid-column: span 2; /* 跨越兩列 *//* 區域命名定位 */grid-area: content;
}

3.3 響應式網格設計

.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 20px;
}@media (max-width: 768px) {.container {grid-template-columns: 1fr;}.sidebar {grid-row: 2; /* 移動側邊欄位置 */}
}

四、Grid布局 vs Flexbox布局

特性	Grid布局	Flexbox布局
維度	二維布局（行+列）	一維布局（行或列）
方向控制	同時控制行和列	一次控制一個方向
內容流	更適合整體頁面布局	更適合組件內部布局
重疊控制	輕松實現元素重疊	需要額外定位技巧
對齊方式	更強大的對齊控制	對齊功能強大但較單一

最佳實踐：Grid用于宏觀布局，Flexbox用于微觀組件布局，兩者可完美結合使用！

五、高級技巧與最佳實踐

5.1 隱式網格與顯式網格

.container {display: grid;grid-template-columns: repeat(3, 1fr); /* 顯式網格 */grid-auto-rows: 100px; /* 隱式行高度 */grid-auto-columns: 200px; /* 隱式列寬度 */grid-auto-flow: dense; /* 自動填充空白區域 */
}

?5.2 使用minmax()函數

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

5.3 層疊與z-index控制

.item {grid-column: 1;grid-row: 1;z-index: 2; /* 網格項可以層疊 */
}

5.4 子網格(subgrid)支持

.container {display: grid;grid-template-columns: 1fr 1fr;
}.item {display: grid;grid-template-columns: subgrid; /* 繼承父網格列軌道 */grid-column: span 2; /* 跨越兩列 */
}

六、瀏覽器支持與漸進增強

Grid布局已得到所有現代瀏覽器的良好支持（包括IE10/11的部分支持）。對于舊版瀏覽器，可以采用漸進增強策略：

.container {display: flex; /* 回退方案 */flex-wrap: wrap;
}@supports (display: grid) {.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));}
}

結語：擁抱Grid布局新時代

CSS Grid布局是網頁設計領域的革命性進步，它為我們提供了前所未有的布局能力。通過掌握Grid布局，你可以：

1. 輕松創建復雜的響應式布局

2. 減少不必要的HTML嵌套

3. 提高代碼可維護性和可讀性

4. 實現更靈活的設計方案

5. 提升開發效率，減少布局時間