這是一篇快速介紹網站未來布局的文章。

Grid 布局是網站設計的基礎，CSS Grid 是創建網格布局最強大和最簡單的工具。

CSS Grid 今年也獲得了主流瀏覽器（Safari，Chrome，Firefox，Edge）的原生支持，所以我相信所有的前端開發人員都必須在不久的將來學習這項技術。

在本文中，我將盡可能快速地介紹CSS網格的基本知識。我會把你不應該關心的一切都忽略掉了，只是為了讓你了解最基礎的知識。

你的第一個 Grid 布局

CSS Grid 布局由兩個核心組成部分是 wrapper （父元素）和 items （子元素）。 wrapper 是實際的 grid(網格)，items 是 grid(網格) 內的內容。

下面是一個 wrapper 元素，內部包含6個 items ：

<div class="wrapper">  <div>1</div>  <div>2</div>  <div>3</div>  <div>4</div>  <div>5</div>  <div>6</div></div>

要把 wrapper 元素變成一個 grid(網格)，只要簡單地把其 display 屬性設置為 grid 即可：

.wrapper {    display: grid;}

但是，這還沒有做任何事情，因為我們沒有定義我們希望的 grid(網格) 是怎樣的。它會簡單地將6個 div 堆疊在一起。

我已經添加了一些樣式，但是這與 CSS Grid 沒有任何關系。

Columns(列) 和 rows(行)

為了使其成為二維的網格容器，我們需要定義列和行。讓我們創建3列和2行。我們將使用 grid-template-row 和 grid-template-column 屬性。

.wrapper {    display: grid;    grid-template-columns: 100px 100px 100px;    grid-template-rows: 50px 50px;}

正如你所看到的，我們為 grid-template-columns 寫入了 3 個值，這樣我們就會得到 3 列。 我們想要得到 2 行，因此我們為 grid-template-rows 指定了2個值。

這些值決定了我們希望我們的列有多寬（ 100px ），以及我們希望行數是多高（ 50px ）。 結果如下：

為了確保你能正確理解這些值與網格外觀之間的關系，請看一下這個例子。

.wrapper {    display: grid;    grid-template-columns: 200px 50px 100px;    grid-template-rows: 100px 30px;}

請嘗試理解上面的代碼，思考一下以上代碼會產生怎樣的布局。

這是上面代碼的布局的結果：

非常好理解，使用起來也非常簡單是不是？下面我們來加大一點難度。

放置 items(子元素)

接下來你需要學習的是如何在 grid(網格) 上放置 items(子元素) 。特別注意，這里才是體現 Grid 布局超能力的地方，因為它使得創建布局變得非常簡單。

我們使用與之前相同的 HTML 標記，為了幫助我們更好的理解，我們在每個 items(子元素) 加上了單獨的 class ：

<div class="wrapper">  <div class="item1">1</div>  <div class="item2">2</div>  <div class="item3">3</div>  <div class="item4">4</div>  <div class="item5">5</div>  <div class="item6">6</div></div>

現在，我們來創建一個 3×3 的 grid(網格)：

.wrapper {    display: grid;    grid-template-columns: 100px 100px 100px;    grid-template-rows: 100px 100px 100px;}

將得到以下布局：

不知道你發現沒有，我們只在頁面上看到 3×2 的 grid(網格)，而我們定義的是 3×3 的 grid(網格)。這是因為我們只有 6 個 items(子元素) 來填滿這個網格。如果我們再加3個 items(子元素)，那么最后一行也會被填滿。

要定位和調整 items(子元素) 大小，我們將使用 grid-column 和 grid-row 屬性來設置：

.item1 {    grid-column-start: 1;    grid-column-end: 4;}

我們在這里要做的是，我們希望 item1 占據從第一條網格線開始，到第四條網格線結束。換句話說，它將獨立占據整行。 以下是在屏幕上顯示的內容：

如果你不明白我們設置的只有 3 列，為什么有4條網格線呢？看看下面這個圖像，我畫了黑色的列網格線：

請注意，我們現在正在使用網格中的所有行。當我們把第一個 items(子元素) 占據整個第一行時，它把剩下的 items(子元素) 都推到了下一行。

最后，給你一個更簡單的縮寫方法來編寫上面的語法：

.item1 {    grid-column: 1 / 4;}

為了確保你已經正確理解了這個概念，我們重新排列其他的 items(子元素) 。

.item1 {    grid-column-start: 1;    grid-column-end: 3;}.item3 {    grid-row-start: 2;    grid-row-end: 4;}.item4 {    grid-column-start: 2;    grid-column-end: 4;}

你可以嘗試在你的腦子里過一邊上面代碼的布局效果，應該不會很難。

以下是頁面上的布局效果：

Grid 布局就是這么簡單，當然這里展示的是最簡單的 Grid 布局概念，還有很多概念在這里沒講。如果您有任何問題，歡迎評論，我會盡我所能回答。后續還會有更多關于 Grid 布局概念介紹的文章，敬請關注。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。