1.基础设置：
display: grid;
/* grid可以嵌套使用 */
grid-auto-rows: minmax(100px,auto);/* minmax(最小高度 最大高度) 可以设置为auto*/
/* grid-auto-rows: 300px;行高 */
grid-template-columns: 1fr 1fr;/*设置列宽*/
/* grid-template-colums:repeat(2,1fr); repeat（列数 宽度）*/
grid-column-gap: 1rem;/*列间距*/
grid-row-gap: 1rem;/*行间距*/
grid-gap: 1rem;/* grid-gap是行间距和列间距的缩写 编写规则为：先行后列*/
justify-items: start;/* 水平对齐方式 */
/* stretch(默认值) 完全拉伸 */
/* start 以行轴线的起始位置对齐 */
/* end 以行轴线的末位置对齐 */
/* center 以行轴线的中心区域对齐 */
align-items: center;/* 垂直对齐方式 */
/* center 以列轴线的中心区域对齐 */
/* stretch(默认值) 完全拉伸 */
/* start 以列轴线的起始位置对齐 */
/* end 以列轴线的末位置对齐 */
对于单独的网格设计对齐方式要用到 justify-self和align-self
/* 网格的跨列 */
grid-column:1/3; /* 跨越起始1到终止3列网格线 */
/* 网格的跨行 */
grid-row:1/3; /*跨越起始网格线1-终止3行网格线*/
2.自定义网格布局：
例子：搭建一个3*3的网格
html部分
<div class="main">
<div class="header">
<h1>Hello NS</h1>
</div>
<div class="age">100</div>
<div class="phone">12313215</div>
<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>
<div class="box box-3">box-3</div>
</div>
.main{
display: grid;
grid-template-areas:
'a a a'
'b b c'
'd e f';
grid-gap: 1rem;
}
.header{
grid-area: a;
}
.age{
grid-area: b;
}
.phone{
grid-area: c;
}
.box-1{
grid-area: d;
}
.box-2{
grid-area: e;
}
.box-3{
grid-area: f;
}
.header,
.age,
.box-1,
.box-2,
.box-3,
.phone{
text-align: center;
border: 1px #cccccc solid;
}
效果如下：
3.网格的嵌套：
html部分：
<div class="main">
<div class="header"><h1>Hello NS</h1></div>
<div class="age">100</div>
<div class="phone">12313215</div>
<div class="box box-1">
<div class="xx">xx</div>
<div class="xx">xx</div>
<div class="xx">xx</div>
</div>
<div class="box box-2">box-2</div>
<div class="box box-3">box-3</div>
</div>
css部分·：
.main{
display: grid;
grid-template-columns: repeat(3,3fr);
grid-auto-rows: minmax(100px,auto);
grid-gap: 1rem;
}
.main>div{
background-color: #cccccc;
}
.main>div:nth-child(2n){
background-color: cadetblue;
}
.box-1{
display: grid;/*对box-1所在的网格在进行嵌套*/
grid-template-columns: repeat(3,1fr);
text-align: center;
}
4.响应式布局拓展：
//对于网格布局来说，可以通媒体查询完成一定的响应式布局
@media(max-width: 600px){
.main{
display: grid;
grid-template-areas:
'a '
'b'
'c'
'd'
'e'
'f';
}
//这个就是当最大宽度小于600px时，单元格变为6行1列