CSS Grid 格線排版

Flexbox vs Grid

基本 Grid

.grid-container {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* 3 欄，各 200px */
    grid-template-rows: 100px 100px;           /* 2 列，各 100px */
    gap: 16px;                                 /* 間距 */
}

fr 單位

.grid {
    display: grid;
    /* fr = fraction（比例） */
    grid-template-columns: 1fr 2fr 1fr;  /* 1:2:1 比例 */
    /* 第一欄 25%，第二欄 50%，第三欄 25% */

    /* 混合使用 */
    grid-template-columns: 250px 1fr;    /* 固定 250px + 剩餘空間 */
}

repeat 和 auto-fill

.grid {
    /* repeat(次數, 大小) */
    grid-template-columns: repeat(3, 1fr);        /* 3 等分 */
    grid-template-columns: repeat(3, 200px);      /* 3 個 200px */

    /* 自動填滿 — 響應式神器 */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    /* 自動計算能放幾欄，每欄最小 250px，最大 1fr */
    /* 畫面寬 → 自動變多欄；畫面窄 → 自動變少欄 */
}

指定子元素位置

.header {
    grid-column: 1 / -1;         /* 從第 1 條線到最後（跨整列） */
}

.sidebar {
    grid-column: 1 / 2;         /* 第 1 欄 */
    grid-row: 2 / 4;            /* 第 2~3 列 */
}

.main {
    grid-column: 2 / 4;         /* 第 2~3 欄 */
}

/* 用 span 更直覺 */
.wide {
    grid-column: span 2;        /* 橫跨 2 欄 */
    grid-row: span 3;           /* 橫跨 3 列 */
}

Grid Template Areas

.page {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "sidebar main    main"
        "footer  footer  footer";
    grid-template-columns: 250px 1fr 1fr;
    grid-template-rows: 60px 1fr 40px;
    min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

對齊

.grid {
    /* 整體內容對齊 */
    justify-content: center;     /* 水平置中 */
    align-content: center;       /* 垂直置中 */

    /* 格子內容對齊 */
    justify-items: center;       /* 每個格子水平置中 */
    align-items: center;         /* 每個格子垂直置中 */
    place-items: center;         /* 上面兩個的簡寫 */
}

/* 個別格子 */
.item {
    justify-self: end;           /* 這格靠右 */
    align-self: start;           /* 這格靠上 */
}

響應式佈局實例

/* 卡片自動排列 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding: 24px;
}

/* 聖杯佈局（Holy Grail） */
.holy-grail {
    display: grid;
    grid-template:
        "header header header" 60px
        "nav    main   aside"  1fr
        "footer footer footer" 40px
        / 200px  1fr    200px;
    min-height: 100vh;
}

/* 手機版：改成單欄 */
@media (max-width: 768px) {
    .holy-grail {
        grid-template:
            "header" 60px
            "nav"    auto
            "main"   1fr
            "aside"  auto
            "footer" 40px
            / 1fr;
    }
}