用 grid 構建 CSS 佈局系統（2）

CSS · 發表 2019-02-15 08:01:42

摘要： 2011 四月 grid 的草案第一次亮相 Microsoft 給出 grid 方案最早是在 IE10 上實現了 grid 規範還在不斷改進，現在規範和 IE10 上的實現有很大差異 2014 八月 29 完成最後編輯的草案現在已經在 chrome 等...

2011 四月 grid 的草案第一次亮相
Microsoft 給出 grid 方案
最早是在 IE10 上實現了 grid
規範還在不斷改進，現在規範和 IE10 上的實現有很大差異
2014 八月 29 完成最後編輯的草案
現在已經在 chrome 等瀏覽器上實現

我們先定義一個 html 結構便於我們觀察效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

.wrapper{
display: grid;
}

現在為 wrapper 設定顯示型別為 grid，這樣才能啟動我們 grid 系統。

.wrapper{
display: grid;
grid-template-columns: 200px 40px auto 40px 200px;
grid-template-rows: auto;
}

grid 系統中通過定義 200px 40px auto 40px 200px 來將頁面劃分 5 區域，這 5 區域會生產 6 條線。

這裡 auto 會自適應佔據剩餘的空間，所以我們根據線來定義我們空間，具體可以參見這個圖，這個圖和可以清晰幫助您理解 grid 是如何劃分區域。

018.PNG

.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

然後我們就可以為每塊指定的返回，注意 grid-column-start 設定的第 1 條線開始到 grid-column-end 的指定的第 6 線結束。所以我們開始編碼時可以現在紙上畫好草圖，然後根據草圖進行 coding。

.nav{
grid-column-start:1;
grid-column-end:6;
grid-row-start: 1;
grid-row-end: 2;
}
.side{
grid-column-start:1;
grid-column-end:2;
grid-row-start: 2;
grid-row-end: 3;
}
.content{
grid-column-start:3;
grid-column-end:4;
grid-row-start: 2;
grid-row-end: 3;
}
.feature{
grid-column-start:5;
grid-column-end:6;
grid-row-start: 2;
grid-row-end: 3;
}

這樣寫似乎是一個體力活，grid 提供一個簡便的寫法， grid-column-start:1;grid-column-end:2; 這兩句合併成一句 grid-column: 1 / 6; 是不是減少很多工作量。

.wrapper{
display: grid;
grid-template-columns: 200px 40px auto 40px 200px;
grid-template-rows: auto;
}
.nav{
grid-column: 1 / 6;
grid-row: 1 / 2;
}
.side{
grid-column:1 / 2;
grid-row: 2 / 3;
}
.content{
grid-column:3 / 4;
grid-row: 2 / 3;
}
.feature{
grid-column:5 / 6;
grid-row: 2 / 3;
}

上面通過分隔線來劃分區域，我們也可以通過定義區域來劃分區域，在多人協作開發情況這種似乎很方便，我們通過 grid-area 為每一個塊定義好一個區域名稱，然後就可以拿這些區域名稱進行劃分了

.nav{
grid-area: nav;
}
.side{
grid-area: side;
}
.content{
grid-area: main;
}
.feature{
grid-area:feature;
}

這裡我們可以通過 （.） 來用作佔位符號，然後對應想要放置我們事先設定好的區域時候，就可以把區域名稱放置在想要放置位置就可以了。

.wrapper{
display: grid;
grid-template-columns: 200px 40px auto 40px 200px;
grid-template-rows: auto;
grid-template-areas:
". . nav . ."
" side . main . feature"
}
.nav{
grid-area: nav;
}
.side{
grid-area: side;
}
.content{
grid-area: main;
}
.feature{
grid-area:feature;
}

用 grid 構建 CSS 佈局系統（2）

您可能也會喜歡…