CSS-Grid布局demo
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100px 100px 100px; gap: 10px; } .item1 { grid-column: 1 / 4; grid-row: 1 / 3; order: 2; } .item2 { grid-column: 2 / -1; grid-row: 2 / 4 }
某位置留空用 . 来代替。
.grid { display: grid; grid-template-areas: "one one" "two three" ". four"; grid-template-columns: 1fr 2fr; gap: 10px; } .one { grid-area: one; } .two { grid-area: two; } .three { grid-area: three; } .four { grid-area: four; }
阅读量: 552
发布于:
修改于:
发布于:
修改于: