CSS 格線

CSS 格線格線簡化了當今的設計模式
並開創了平面設計的可能性。

這是個無需框架
的排版框架。

佈局。檢測。設計。欣賞。

能屈能伸

你創建的格線可以是固定的尺寸、也可以是靈活的百分比、或新生的分塊單位 fr。

看來你的瀏覽器不支援 CSS 格線功能呢。
要觀賞本展示的話，請用最新版 Firefox 來看吧。

CSS

/* 總共三列：每列都是 100px */
.grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-gap: 20px;
}

/* 總共三列：由左到右，個別是一分塊、兩分塊、與三分塊 */
.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr;
    grid-gap: 20px;
}

/* 總共三列：由左到右，個別為 50%、100px、接著是剩下的分塊 */
/* 總共兩行：第一行 100px 第二行 200px */
.grid-container {
    display: grid;
    grid-template-columns: 50% 100px 1fr;
    grid-template-rows: 100px 200px;
    grid-gap: 20px;
}

各得其所

你可以在不改動 HTML 原始碼順序的情況下，精確定位格線區域內的各單位。對齊功能可控制各單位在格線區域內如何對齊、還有整個格線又該如何對齊。

看來你的瀏覽器不支援 CSS 格線功能呢。
要觀賞本展示的話，請用最新版 Firefox 來看吧。

CSS

/* 1fr 的列重複三次 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.item-1 {
    grid-column: 2;
    grid-row: 2;
}

.item-2 {
    grid-column: 1;
    grid-row: 1;
}

.item-3 {
    grid-column: 3;
    grid-row: 3;
}

.item-4 {
    grid-column: 3;
    grid-row: 1;
}

/* 一個重複四次 1fr 的列、還有一個重複三次 1fr 的列 */
/* 還給每個單位起了名字 */
.grid-container {
    display: grid;
    grid-template: repeat(4, 1fr) / repeat(3, 1fr);
    grid-gap: 20px;
    grid-template-areas:
        'header header header'
        'sidebar content content'
        'sidebar content content'
        'footer footer footer';
}

.item-1 {
    grid-area: content;
}

.item-2 {
    grid-area: sidebar;
}

.item-3 {
    grid-area: header;
}

.item-4 {
    grid-area: footer;
}

/* 重複四次 1fr 的列 */
/* 自動啟行，每行高度最少 100px 最多 1fr */
/* 給每個格線單位起了名字 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(100px, 1fr);
    grid-gap: 20px;
    grid-template-areas:
        'a a b b'
        'a a b b'
        'c c d d'
        'c c d d';
}

.item-1 {
    grid-area: a;
    align-self: start;
}

.item-2 {
    grid-area: b;
    align-self: end;
}

.item-3 {
    grid-area: c;
    align-self: start;
}

.item-4 {
    grid-area: d;
    align-self: end;
}

跨山壓海

各單位可以跨越格線的格子、並各自交會與重疊。你可以透過 z-index 控制重疊分層的規則。

看來你的瀏覽器不支援 CSS 格線功能呢。
要觀賞本展示的話，請用最新版 Firefox 來看吧。

CSS

/* 重複三個稱為 "row" 的行，每個高度都介於 120px 與 1fr 之間。 */
/* 重複四個稱為 "col" 的列，每個長度都會是 1fr */
.grid-container {
    display: grid;
    grid-template: repeat(3, [row] minmax(120px, 1fr)) / repeat(4, [col] 1fr);
    grid-gap: 20px;
}

.item-1 {
    grid-column: col 1 / span 4;
    grid-row: row 1;
}

.item-2 {
    grid-column: col 4;
    grid-row: row 1 / span 3;
}

.item-3 {
    grid-column: col 1;
    grid-row: row 2;
}

.item-4 {
    grid-column: col 2 / span 2;
    grid-row: row 2;
}

.item-5 {
    grid-column: col 1;
    grid-row: row 3;
}

.item-6 {
    grid-column: col 2 / span 2;
    grid-row: row 3;
}

/* 重複四個稱為 "row"、長度是 1fr 的行，還有五個稱為 "col"、長度是 1fr 的列 */
.grid-container {
    display: grid;
    grid-template: repeat(4, [row] 1fr) / repeat(5, [col] 1fr);
    grid-gap: 20px;
}

.item-1 {
    grid-column: col 1;
    grid-row: row 1;
    z-index: 1;
}

.item-2 {
    grid-column: col 1 / span 2;
    grid-row: row 1 / span 2;
    z-index: 2;
}

.item-3 {
    grid-column: col 1 / span 3;
    grid-row: row 1 / span 3;
    z-index: 3;
}

.item-4 {
    grid-column: col 3 / span 3;
    grid-row: row 2 / span 3;
    z-index: 3;
}

.item-5 {
    grid-column: col 4 / span 2;
    grid-row: row 3 / span 2;
    z-index: 2;
}

.item-6 {
    grid-column: col 5;
    grid-row: row 4;
    z-index: 1;
}

/* 重複六個稱為 "row"、長度是 1fr 的行，還有六個稱為 "col"、長度也是 1fr 的列 */
.grid-container {
    display: grid;
    grid-template: repeat(6, [row] 1fr) / repeat(6, [col] 1fr);
    grid-gap: 20px;
}

.item-1 {
    grid-column: col 1 / span 3;
    grid-row: row 1 / span 2;
    z-index: 3;
}

.item-2 {
    grid-column: col 3 / span 4;
    grid-row: row 2 / span 3;
    z-index: 3;
}

.item-3 {
    grid-column: col 5 / span 2;
    grid-row: row 1 / span 5;
    z-index: 3;
}

.item-4 {
    grid-column: col 2;
    grid-row:  row 2 / span 4;
    z-index: 2;
}

.item-5 {
    grid-column: col 1 / span 3;
    grid-row: row 4 / span 3;
    z-index: 1;
}

.item-6 {
    grid-column: col 4 / span 3;
    grid-row: row 5 / span 2;
    z-index: 4;
}