Grid佈局 - 一鍵佈局嘗試總結~

---

Gird佈局是什麼？

Grid(網格) 佈局使咱們可以比以往任什麼時候候均可以更靈活構建和控制自定義網格 ; 可以將網頁分紅具備簡單屬性的行和列來完成咱們須要的網格佈局

Gird佈局 擼完後是什麼樣子？

進入你的第一個Grid佈局

HTML 代碼: box父元素，內部包含6個子元素 items

<div class="box">
    <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>
複製代碼

要把box變成 grid(網格)，只簡單地把display 屬性設置爲 grid 便可：

.box{
    display:grid;
}
複製代碼

固然如今的上圖和 grid沒什麼關係，可是請記住「她」最後的樣子~~

---

爲了使其成爲二維的網格容器，咱們須要定義列和行： 建立3行(columns)2列(rows)

CSS代碼 ->

.box{
    display: grid;
    grid-template-columns: 50px 50px 50px;
    grid-template-rows: 20px 20px;
}
複製代碼

grid-template-columns 建立列；建立幾列就在後面寫幾個值； grid-template-rows 建立行；建立幾行就在後面寫幾個值； 結果：

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

CSS代碼

.box{
    display: grid;
    grid-template-columns: 150px 50px 10px;
    grid-template-rows: 50px 30px;
}
複製代碼

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

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

是否是很是好理解，使用起來也很是簡單是否是？

深刻探究推薦參考：

• 5分鐘學會CSS Grid佈局
• 如何使用 CSS Grid 快速而又靈活的佈局
• CSS Grid 佈局徹底指南(圖解 Grid 詳細教程)