第一篇的父元素布局样式
第一种写法
.contaniner {
width: 400px;
height: 400px;
display: -webkit-grid;
display: grid;
grid-template-columns: 100px 100px 100px auto;
grid-template-rows: 100px 100px 100px auto;
background-color: hotpink;
}
第二种写法
.contaniner {
width: 400px;
height: 400px;
display: -webkit-grid;
display: grid;
grid: 100px 100px 100px auto / 100px 100px 100px auto;
background-color: hotpink;
}
新的单位引入
.contaniner {
width: 400px;
height: 400px;
display: -webkit-grid;
display: grid;
grid: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
background-color: hotpink;
}
fr是将当前元素等分
grid: 25% 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
支持百分比