意如其名就是像網(wǎng)一樣的布局，類似熟悉的excel表格一樣

Grid布局的屬性主要在父元素和子元素上。

父元素

首先我們需要確認(rèn)的是父元素的display的值為grid.

然后只是加這一個(gè)屬性，并沒有效果

那是因?yàn)槲覀冞€沒有設(shè)置有幾行，幾列

行我們用row來表示，列用colum來表示

那列是主軸，默認(rèn)是1列，所以就會(huì)看到上面的，都在一列中，如果我們改成2，那么就會(huì)是2列，然后其它的按順序網(wǎng)下排 用

grid-template-columns來表示，后面的值表示每一列的寬度，有幾列就寫幾個(gè)，或者寫auto（自適應(yīng)）

效果 colunm-gap表示列之間的空隙，row-gap表示行之間的空隙

grid-template-rows和列的用法一樣

子元素

子元素要做的主要是占幾行幾列，比如

首先我們要了解下line,很好理解如下圖

所以我們可以通過子元素占哪些line來確定它的占位

比如我們想第一個(gè)元素占兩行兩列

屬性 x/x 前面表示從哪條線開始，后面表示從哪條線結(jié)束

后面的元素按照原來的方式接著排就行了