生成3x3九宫格
每列宽100px，每行高100px
//绝对单位
.box{
display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
}
//相对单位
.box{
display:grid;
grid-template-columns:33.33% 33.33% 33.33%;
grid-template-rows:33.33% 33.33% 33.33%;
}
//使用repeat函数，简化重复书写同样的值
.box{
display:grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
repeat(times,value)
times为重复次数，value为需要重复的值
//定义四列，第一三列列宽为10px，二四列列宽为50px
grid-template-rows: repeat(2, 10px 50px);
网友评论