网格区域
示例
在下面的示例中,我有一个包含两个网格项目的网格容器。我使用grid-area
属性为它们命名,然后使用grid-template-areas
在网格上对其进行布局。这将创建两个网格区域,一个覆盖四个网格单元格,另一个覆盖两个网格单元格。
css
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
html
<div class="wrapper">
<div class="item1">Item</div>
<div class="item2">Item</div>
</div>
另请参阅
属性参考
进一步阅读
- CSS 网格布局指南
- CSS 网格布局规范中网格区域的定义