君山 发表于 2021-4-27 09:43:24

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]
查看完整版本: CSS Grid 网格布局教程(4元素属性: grid-area 属性)