1.grid-template-columns : 列属性
grid-template-rows:行属性
#site{
color: white;
display: grid;
/* 把列分为3列,每列占1等分,可以使用repeat减少代码的重复 */
// grid-template-columns: 1fr 1fr 1fr; /* repeat(3,1fr) */
/* minmax表示最大值最小值 */
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px minmax(100px,auto) 100px;
/* 每一列之间的间隔 */
grid-column-gap: 10px;
/* 每一行之间的间隔 */
grid-row-gap: 5px;
/* 行列间隔简写 */
grid-gap: 10px 5px;
}
#part1 {
background: blue;
/*根据行列线号对该网格就行移动,然后其他的每一个格子就会自动补齐(如图2)*/
grid-column-start: 2;
grid-column-end: 3;
/*下列简写成 grid-row:2 / 3 */
grid-row-start: 2;
grid-row-end: 3;
}
#part2 {
background: green;
}
#part3 {
background: grey;
}
#part4 {
background: red;
}
#part5 {
background: yellow;
}
#part6 {
background: purple;
}
#part7 {
background: black;
}
#part8 {
background: pink;
}
#part9 {
background: orange;
}
<div id='site'>
<div id='part1'>1</div>
<div id='part2'>2</div>
<div id='part3'>3</div>
<div id='part4'>4</div>
<div id='part5'>5</div>
<div id='part6'>6</div>
<div id='part7'>7</div>
<div id='part8'>8</div>
<div id='part9'>9</div>
</div>
实例图:
2.grid-template-areas
#site{
color: white;
display: grid;
grid-template-columns: 3fr 1fr;
grid-auto-rows: 100px 100px 300px 100px;
grid-template-areas:
"header header"
"nav nav"
"main aside"
"footer footer"
}
#area1{
background: blue;
grid-area: header;
}
#area2{
background: green;
grid-area: nav;
}
#area3{
background: yellow;
grid-area: main;
}
#area4{
background: gray;
grid-area: aside;
}
#area5{
background: red;
grid-area: footer;
}
<div id='site'>
<div id='area1'>1</div>
<div id='area2'>2</div>
<div id='area3'>3</div>
<div id='area4'>4</div>
<div id='area5'>5</div>
</div>
3.隐形网格
如果你定义了三行两列的网格,而你需要九个网格,那么多出来的三个网格就是隐形网格
#site{
color: white;
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: repeat(3,50px);
/* 隐形网格的高度 */
grid-auto-rows: 100px;
}
#part1 {
background: blue;
}
#part2 {
background: green;
}
#part3 {
background: grey;
}
#part4 {
background: red;
}
#part5 {
background: yellow;
}
#part6 {
background: purple;
}
#part7 {
background: black;
}
#part8 {
background: pink;
}
#part9 {
background: orange;
}
<div id='site'>
<div id='part1'>1</div>
<div id='part2'>2</div>
<div id='part3'>3</div>
<div id='part4'>4</div>
<div id='part5'>5</div>
<div id='part6'>6</div>
<div id='part7'>7</div>
<div id='part8'>8</div>
<div id='part9'>9</div>
</div>