前言

網站的佈局是一個網站設計的根本，CSS的Grid佈局已經成為了未來網站佈局的基本方式。

今天這篇文章我們通過圖文，一起看看如何自己實現Grid佈局方式。

CSS

第一個Grid佈局

首先我們看看最基本的Grid佈局是什麼樣的，HTML頁面的程式碼如下所示。

HTML程式碼

然後設定其CSS屬性，這裡主要展示容器的CSS屬性，給子元素新增的color屬性就不在這裡展示了。

CSS屬性

在頁面上看到的效果如下，目前因為沒有對子div元素做任何設定，會自動將子div沿垂直方向排列。

頁面效果

設定行和列

為了讓外層的div(wrapper)為一個網格容器，需要設定其行數和列數，就像一個表格一樣。

此時就需要用到grid-template-columns和grid-template-rows兩個屬性值。

• grid-template-columns

用於設定網格容器的列屬性，其實就相當於列的寬度。當我們需要幾列展示時，就設定幾個值，這個屬性可以接收具體數值比如100px，也可以接收百分比值，表示佔據容器的寬度。

需要注意的是：當給容器設定了寬度時，grid-template-columns設定的百分比值是以容器的寬度值為基礎計算的。如果未設定寬度時，會一直向上追溯到設定了寬度的父容器，直到body元素。

比如我們設定了以下的CSS屬性。

CSS屬性

可以看出三列寬度加起來的百分比值為120%，而且wrapper容器並未設定寬度，會一直向上追溯到body元素，這樣三列的總寬度已經超過了body的寬度，因此會出現滾動條。

頁面效果

• grid-template-rows

用於設定網格容器的行屬性，其實就相當於行的高度，其特性與grid-template-columns屬性類似。

下面簡單修改grid-template-columns和grid-template-rows兩個屬性的值。

CSS值

得到的效果圖如下所示。

效果圖

放置子元素

接下來我們看看別的情況，通過CSS屬性設定3*3的網格。

CSS屬性

在頁面上的呈現方式如下所示。

從頁面上看我們看不出有什麼問題，但是開啟控制檯後可以發現，這個網格已經佔據了3*3的空間。它後面的元素只能排列在所有的網格後面。

頁面實際情況

不規則排列

當我們需要得到特殊的排列方式，比如佔滿整行，佔滿整列，二三行合併等等。

這就需要用到grid-column和grid-row屬性，表示行網線和列網線的序號。通過設定start和end值，來進行網格的合併。

網線序號

我們重新給wrapper容器內部的div新增class類。

HTML程式碼

然後新增以下的CSS程式碼，給不同的網格特定的行號和列號。

CSS程式碼

最終得到的效果圖如下所示。

​頁面效果圖

結束語

今天這篇文章介紹了CSS中Grid佈局的基礎知識，應該可以很快掌握，其他的複雜點的網格佈局大家也可以自己去嘗試。