css grid 网格布局

网格布局

.wrapper{
列宽
display:grid;
grid-template-columns:70% 30% 40%;
grid-column-gap:1rem;
grid-row-gap:1rem;
grid-gap:1rem;
}
.wrapper{
display:grid;
grid-template-columns:1fr 2fr 1fr;
grid-template-columns:repeat(3,1fr);
间距
grid-gap:1rem;
行高
grid-auto-rows:100px;
grid-auto-rows:minmax(100px,auto);
横轴线对齐方式
justify-itmes:start;
列轴线对齐方式
align-items:end;
}
.box1{
跨越1-3的网格线
grid-column:3;
grid-column:1/3;
grid-row:1/3;
}
.wrapper{
display:grid;
grid-template-areas:
'header header header'
'content content content'
'box-1 box-2 box-3'
'footer footer footer'
grid-gap:1rem;
}
.header{
grid-area:header;
}
.content{
grid-area:content;
}
.sidbar{
grid-area:sidbar;
}
.box-1{
grid-area:box-1;
}
.box-2{
grid-area:box-2;
}
.box-3{
grid-area:box-3;
}
.footer{
grid-area:footer;
text-align:center;
}