Grid 佈局介紹詳情 - grid CRMEB 博客

1. 什麼是 Grid

佈局Grid 佈局及網格佈局，是一種新的 css 模型，一般是將一個頁面劃分成幾個主要的區域，定義這些區域的大小、位置和層次等關係，是目前唯一一種 css 二維佈局。

2. 和 flex 佈局的區別

Grig 佈局和 flex 佈局時有實質性的區別的，flex 是一維佈局，只能處理一個維度上的佈局，一行或者是一列，但是 Grid 佈局是二維佈局，將容器劃分成了 “行” 和” 列”，產生了一個個的網格，可以將網格元素放在行和列相關的位置上，從而達到了佈局的目的。

flex 佈局示例：

grid 佈局示例：

3. grid 佈局的概念
首先我們先看一個小例子，通過這個例子演示一些基礎概念

運行結果：

容器和項目
我們通過再元素上聲明 display:grid 或者 display:inline-grid 來創建一個容器網格，這個元素的所有直系 3 子元素將成為網格項目。
網格軌道
grid-template-columns 和 grid-template-rows 屬性來定義網格中的行和列網格單元一個網格單元
是在一個網格元素中最小的單位，上圖中 One、Two、Three、Four… 都是一個個的網格單元網格線
劃分網格的線即為網格線。需要注意的是，我們定義網格的時候，定義的是網格軌道。Grid 會自動創建編號的網格線來定位每一個元素，m 列有 m+1 根垂直的網格線，n 行有 n+1 根水平網格線。一般而言，是從左到右，從上到下，1，2，3 進行編號排序，從右到左，從下到上，則是按照 -1，-2，-3… 順序進行編號排下序。