关于display:grid
Posted gogogoing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于display:grid相关的知识，希望对你有一定的参考价值。
.wrapper {
display: grid;/*产生一个块级的网格*/
grid-template-columns: repeat(3, 1fr);/*利用空格分隔的值定义网格的列和行。
grid-template-columns和grid-template-rows属性来定义网格中的行和列。这些属性定义了网格的轨道。
一个网格轨道就是网格中任意两条线之间的空间。
值的大小代表轨道的大小，并且他们之间的空格表示网格线*/
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);/*用minmax()作为grid-auto-rows的值。
自动创建的行高将会是最小100px，最大为auto。
用auto意味着行的尺寸将会根据内容的大小来自动变换。*/
}
.one {
grid-column: 1 / 60;/*设置网格项目列方向的开始位置为1的网格线和结束为60的网格线*/
grid-row: 1;
background-color: brown/*颜色为brown*/
}
.two {
grid-column: 2 / 4;/*同上*/
grid-row: 1 / 3;
background-color:blue
}
.three {
grid-column: 1;
grid-row: 2 / 5;
background-color: brown
}
.four {
grid-column: 3;
grid-row: 3;
background-color: brown
}
.five {
grid-column: 2;
grid-row: 4;
background-color: brown
}
.six {
grid-column: 3;
grid-row: 4;
background-color: brown
}
/*colum列*/
以上是关于关于display:grid的主要内容，如果未能解决你的问题，请参考以下文章