CSS Grid 格線佈局
CSS Grid 是一種二維的佈局系統，可以同時控制行 (row) 和列 (column)，非常適合用於網頁的整體佈局和複雜的格狀設計。
基本概念
Grid 佈局包含：
- Grid 容器 (Container)：設定
display: grid的父元素 - Grid 項目 (Items)：容器內的直接子元素
- Grid 線 (Lines)：分隔行和列的線
- Grid 軌道 (Tracks)：兩條相鄰格線之間的空間（行或列）
- Grid 儲存格 (Cell)：行和列交會的最小單位
- Grid 區域 (Area)：一個或多個儲存格組成的矩形區域
.container {
display: grid;
}
定義列和行
grid-template-columns
定義列的數量和寬度。
.container {
grid-template-columns: 200px 200px 200px; /* 三欄，各 200px */
grid-template-columns: 1fr 1fr 1fr; /* 三欄，等分 */
grid-template-columns: 200px 1fr 200px; /* 固定-彈性-固定 */
grid-template-columns: repeat(3, 1fr); /* 三欄，等分 */
grid-template-columns: repeat(4, 100px); /* 四欄，各 100px */
}
grid-template-rows
定義行的數量和高度。
.container {
grid-template-rows: 100px 200px; /* 兩行 */
grid-template-rows: auto 1fr auto; /* 頭-內容-尾 */
grid-template-rows: repeat(3, 100px); /* 三行，各 100px */
}
fr 單位
fr (fraction) 表示剩餘空間的比例。
.container {
grid-template-columns: 1fr 2fr 1fr; /* 1:2:1 的比例 */
}
repeat() 函數
簡化重複的軌道定義。
/* 等同於 1fr 1fr 1fr 1fr */
grid-template-columns: repeat(4, 1fr);
/* 混合使用 */
grid-template-columns: 100px repeat(3, 1fr) 100px;
minmax() 函數
設定軌道的最小和最大值。
grid-template-columns: minmax(100px, 200px) 1fr 1fr;
grid-template-columns: repeat(3, minmax(200px, 1fr));
auto-fill 和 auto-fit
自動填充盡可能多的軌道。
/* 自動填充，每欄最小 200px */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* auto-fit：空白欄會收縮 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap 間距
設定行和列之間的間距。
.container {
gap: 20px; /* 行列間距相同 */
gap: 20px 10px; /* 行間距 列間距 */
row-gap: 20px; /* 只設行間距 */
column-gap: 10px; /* 只設列間距 */
}
對齊
justify-items
設定項目在儲存格內的「水平」對齊。
.container {
justify-items: stretch; /* 拉伸填滿（預設） */
justify-items: start; /* 靠左 */
justify-items: end; /* 靠右 */
justify-items: center; /* 置中 */
}
align-items
設定項目在儲存格內的「垂直」對齊。
.container {
align-items: stretch; /* 拉伸填滿（預設） */
align-items: start; /* 靠上 */
align-items: end; /* 靠下 */
align-items: center; /* 置中 */
}
place-items
align-items 和 justify-items 的縮寫。
.container {
place-items: center; /* 水平垂直都置中 */
place-items: start end; /* 垂直靠上，水平靠右 */
}
justify-content
當 Grid 總大小小於容器時，設定整個 Grid 的「水平」對齊。
.container {
justify-content: start;
justify-content: end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
}
align-content
當 Grid 總大小小於容器時，設定整個 Grid 的「垂直」對齊。
.container {
align-content: start;
align-content: end;
align-content: center;
align-content: space-between;
}
命名格線
可以為格線命名，方便項目定位。
.container {
grid-template-columns: [start] 200px [content-start] 1fr [content-end] 200px [end];
grid-template-rows: [header-start] 80px [header-end main-start] 1fr [main-end footer-start] 60px [footer-end];
}
.header {
grid-column: start / end;
grid-row: header-start / header-end;
}
grid-template-areas
用視覺化的方式定義 Grid 區域。
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 80px 1fr 60px;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
用 . 表示空白區域：
grid-template-areas:
"header header header"
"sidebar main ."
"footer footer footer";
實用範例
基本三欄佈局
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
gap: 20px;
}
響應式卡片
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
經典頁面佈局
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 50px;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
等高卡片
.card-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Grid 項目預設就會等高 */
圖片網格
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
Grid 項目的定位屬性請參考 CSS Grid 項目屬性。