.grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #fff; color: #444; } .grid-container div { background-color: #444; color: #fff; text-align: center; font-size: 30px; } .item1 { grid-column-end: span 2; } .item2 { grid-row-end: span 2; } .item3 { grid-column-end: span 2; grid-row-end: span 2; }
在上面的代码中,大家创建了一个网格容器,并为大多数单元格定义了相同的样式。大家使用“grid-column-end:span 2”和“grid-row-end:span 2”来合并单元格2和3。大家还使用“grid-column-end:span 2”和“grid-row-end:span 2”来合并单元格1和4。
CSS中合并单元格的属性非常有用。使用这些属性,大家可以创建更复杂的页面布局,而无需使用表格布局。