1. 什么是Grid布局
Grid布局及網(wǎng)格布局，是一種新的css模型，一般是將一個頁面劃分成幾個主要的區(qū)域，定義這些區(qū)域的大小、位置和層次等關(guān)系，是目前唯一一種css二維布局。
2. 和flex布局的區(qū)別
Grig布局和flex布局時有實質(zhì)性的區(qū)別的，flex是一維布局，只能處理一個維度上的布局，一行或者是一列，但是Grid布局是二維布局，將容器劃分成了“行”和”列”，產(chǎn)生了一個個的網(wǎng)格，可以將網(wǎng)格元素放在行和列相關(guān)的位置上，從而達(dá)到了布局的目的。
flex布局示例：
grid布局示例：
3. grid布局的概念
首先我們先看一個小例子，通過這個例子演示一些基礎(chǔ)概念
運行結(jié)果：
容器和項目
我們通過再元素上聲明display:grid或者display:inline-grid來創(chuàng)建一個容器網(wǎng)格，這個元素的所有直系3子元素將成為網(wǎng)格項目。
網(wǎng)格軌道
grid-template-columns和grid-template-rows屬性來定義網(wǎng)格中的行和列
網(wǎng)格單元
一個網(wǎng)格單元是在一個網(wǎng)格元素中最小的單位，上圖中One、Two、Three、Four…都是一個個的網(wǎng)格單元
網(wǎng)格線
劃分網(wǎng)格的線即為網(wǎng)格線。需要注意的是，我們定義網(wǎng)格的時候，定義的是網(wǎng)格軌道。Grid會自動創(chuàng)建編號的網(wǎng)格線來定位每一個元素，m列有m+1根垂直的網(wǎng)格線，n行有n+1根水平網(wǎng)格線。一般而言，是從左到右，從上到下，1，2，3進(jìn)行編號排序，從右到左，從下到上，則是按照-1，-2，-3…順序進(jìn)行編號排下序。
如果您想了解更多前端問題，可關(guān)注CRMEB,CRMEB專注于移動互聯(lián)網(wǎng)軟件設(shè)計、研發(fā)、銷售為一體的高新技術(shù)企業(yè)，我們將竭誠為您服務(wù)。
