本文深入探讨CSS Grid布局的使用方法，包括如何定义网格轨道、设置网格项目的大小和位置。通过具体示例，展示了如何利用grid-template-columns、grid-template-rows、grid-gap和grid-auto-rows等属性创建响应式和动态的网页布局。
.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
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
