CSS Grid 网格布局教程(4元素属性: grid-area 属性)
4.3 grid-area 属性grid-area属性指定项目放在哪一个区域。
grid 中的区域是由左到右由上到下按照字母排列的;
.item-1 {
grid-area: e;
}
上面代码中,1号项目位于e区域,效果如下图。
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式,直接指定项目的位置。
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
下面是一个例子。
.item-1 {
grid-area: 1 / 1 / 3 / 3;
}
页:
[1]