grid布局
加在父元素上的属性
grid-template-columns/grid-template-rows
定义元素的行或列的宽高
如果父元素被等分成了9等分，则，不管有多少个子元素，都显示9等分
grid-template-columns: 33% 33% 33%;可以写成grid-template-columns:repeat(3, 33%);
.container {
width: 200px;
height: 200px;
display: grid;
background-color: coral;
margin: 10px;
}.container .item {
border: 1px solid #ccc;
background-color: chocolate;
}
.container1 {
grid-template-columns: 33% 33% 33%;
grid-template-rows: 33% 33% 33%;
}
grid-template-areas
父元素的grid-template-areas配合子元素的grid-area定义网格区域
一个句点表示一个空的网格单元
.container {
width: 200px;
height: 200px;
display: grid;
background-color: coral;
margin: 10px;
}.container .item {
border: 1px solid #ccc;
background-color: chocolate;
}
.container2 {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header header . footer"
"main main . sidebar"
"main main . sidebar";
}
.container2 .item-1 {
grid-area: header;
}
.container2 .item-2 {
grid-area: main;
}
.container2 .item-3 {
grid-area: sidebar;
}
.container2 .item-4 {
grid-area: footer;
}
<div class="container container2">
<div class="item item-1">header</div>
<div class="item item-2">main</div>
<div class="item item-3">sidebar</div>
<div class="item item-4">footer</div>
</div>
grid-column-gap/grid-row-gap/grip-gap
指网格线的大小，也可以说是网格子项之间的间距
.container {
width: 200px;
height: 200px;
display: grid;
background-color: coral;
margin: 10px;
}.container .item {
border: 1px solid #ccc;
background-color: chocolate;
