CSS Grid 网格布局教程(4元素属性: grid-area 属性)

君山

4.3 grid-area 属性

grid-area属性指定项目放在哪一个区域。

grid 中的区域是由左到右由上到下按照字母排列的;

1. .item-1 {
   
2.   grid-area: e;
   
3. }
   

复制代码

上面代码中，1号项目位于e区域，效果如下图。



grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。

1. 
   
2. .item {
   
3.   grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
   
4. }

复制代码

下面是一个例子。

1. .item-1 {
   
2.   grid-area: 1 / 1 / 3 / 3;
   
3. }

复制代码