1、什么是Grid布局？
Grid布局即網(wǎng)格布局，是一種新的css模型，一般是將一個(gè)頁(yè)面劃分成幾個(gè)主要的區(qū)域，定義這些區(qū)域的大小、位置和層次等關(guān)系，是目前唯一一種css二維布局。
2、和flex布局的區(qū)別
Grid布局和flex布局是有實(shí)質(zhì)性的區(qū)別的，flex是一維布局，只能處理一個(gè)維度上的布局，一行或者是一列。但是Grid布局是二維布局 ，將容器劃分成了“行”和“列”，產(chǎn)生了一個(gè)個(gè)的網(wǎng)格，可以將網(wǎng)格元素放在行和列相關(guān)的位置上，從而達(dá)到了布局的目的。
flex布局示例：
Grid布局示例：
3、Grid布局的概念
<div class="wrapper">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<div class="four item">Four</div>
<div class="five item">Five</div>
<div class="six item">Six</div>
.wrapper{
margin: 60px;
/* 聲明一個(gè)容器 */
display: grid;
/* 聲明列的寬度,數(shù)字3表示的重復(fù)3次，即有3列寬度為200px*/
grid-template-columns: repeat(3,200px);
/* 聲明行間距和列間距 */
grid-gap: 20px;
/* 分別表示兩行的高度 */
grid-template-rows: 100px 200px;
}
.item{
text-align: center;
font-size: 200%;
color: #fff;
}
.one{
background-color:#b8e8e0 ;
}
.two{
background-color: #8CC7B5;
}
.three{
background-color:#efe3bf ;
}
.four{
background-color: #BEE7E9;
}
.five{
background-color: #E6CEAC;
}
.six{
background-color: #ECAD9E;
}
運(yùn)行結(jié)果：
容器和項(xiàng)目
我們通過(guò)在元素上聲明display:grid或者display:inline-grid來(lái)創(chuàng)建一個(gè)網(wǎng)格容器，這個(gè)元素的所有直系子元素將成為網(wǎng)格項(xiàng)目。
網(wǎng)格軌道
grid-template-columns和grid-template-rows屬性來(lái)定義網(wǎng)格中的行和列
網(wǎng)格單元
一個(gè)網(wǎng)格單元是在一個(gè)網(wǎng)格元素中最小的單位，上圖中 One、Two、Three、Four…都是一個(gè)個(gè)的網(wǎng)格單元
網(wǎng)格線
劃分網(wǎng)格的線即為網(wǎng)格線。需要注意的是，我們定義網(wǎng)格的時(shí)候，定義的是網(wǎng)格軌道。Grid會(huì)自動(dòng)創(chuàng)建編號(hào)的網(wǎng)格線來(lái)定位每一個(gè)元素，m 列有 m + 1 根垂直的網(wǎng)格線，n 行有 n + 1 跟水平網(wǎng)格線。一般而言，是從左到右，從上到下，1，2，3 進(jìn)行編號(hào)排序，從右到左，從下到上，則是按照 -1，-2，-3…順序進(jìn)行編號(hào)排序
