标签:函数 display play 自动 rop wrapper cto data gap
Grid-template-columns : 设置网格布局每一列的宽度。
repeat: 是个函数,重复之前的命令行,根据之前的重复传入的参数来执行。
fr:长度单位。
wrapper {
display: grid; //定义一个网格
grid-template-columns: repeat(3, 1fr); //网格的列重复三列,宽度为1fr
grid-gap: 10px; //网格间距:10px
grid-auto-rows: minmax(100px, auto); //网格自动排列的行高:最大值自动分配(液态化),最小 100px
}
.one {
grid-column: 1 / 3; //网格占据1-3列
grid-row: 1; //网格占据1行
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
转自:Yangjianyu的博客
标签:函数 display play 自动 rop wrapper cto data gap
原文地址:https://www.cnblogs.com/190luo/p/10181867.html