CSS Grid 网格布局(入门)- 网格线和区域

网格项是可以指定位置的,使用网格线和区域来定位。

CSS Grid 网格布局 - 网格线

1.网格线

一个2行4列的网格,就有3条行网格线,5条列网格线。在使用时在网格项直接指定第几根网格线(1,2,3...)。

在默认的网格排序中,想让某个网格项定位于第二列:

.item{
    grid-column-start: 2;
}

以上代码 grid-column-start 表示网格项在第几根列线上开始,这个属性是设置在网格项上。

grid_网格线1 9-1

从图中看到表示第几根线,有正数,也有负数。负数表示倒数第几根。

2.网格线名称

为了方便使用,还能给网格线命名,使用方括号的方式。

.wrap{
    display: grid;
    grid-template-columns: [a] 100px [b] 100px [c] 100px [d];
}

一条网格线是可以有多个名称的。

grid-template-columns: [a c1-line] 100px [b c2-line] 100px [c c3-line] 100px [d c4-line];

grid-template-columns: [q w e r t] 100px;

在网格项中使用 :

.item{ grid-column-start: 2; }
 
 /* 等同于 */
.item{ grid-column-start: b; }
 
 /* 等同于 */
.item{ grid-column-start: c2-line; }

查看实例

CSS Grid 网格布局 - 区域

网格区域是由一个或者多个网格单元组成的一个矩形区域。 在布局中,某些网格项需要类似于合并单元格,那么使用区域就很方便快捷。

一个3行3列的网格,然后使用区域,以下属性设置在网格容器 :

grid-template-areas:'a b c'
                    'd e f'
                    'g h i';
											
grid-template-areas:'header header header'
                    'sidebar main main'
                    'footer footer footer';

grid-template-areas:'a . c'
                    'd . f'
                    'g . i';

能在网格项中使用区域,以下属性设置在网格项,网格项占满网格第一行 :

.head{ grid-area:header; }
grid_网格区域实例1 9-3

######图上的虚线代表网格线,第一行3个网格单元合一个区域,可以看到 head 占满一行。

1.当使用区域 grid-template-areas 时,必须要有相同数量的单元格。

2.区域名一样的,能让网格项跨越这些单元格,类似单元格合并。

3.如果不想使用某个区域,用句点(.)声明。

4.网格区域的命名会影响网格线的命名。当给区域命名后,区域2条边会自动得到命名 “-start” 和 “-end”。 这意味着一条网格线可能有多个名称。比如以下 :

.wrap{
	display: grid;
	grid-template-areas:'header header header'
			    'sidebar main main'
			    'footer footer footer';
}

区域名称相同的,在使用时就像单元格合并,如以上的 main ,其上边行线和左边列线为 main-start, 下边行线和右边列线为 main-end。

网格的4条行网格线 :
[header-start]、
[header-end sidebar-start main-start]、
[sidebar-end main-end footer-start]、 [footer-end]

网格的4条列网格线 :
[header-start sidebar-start footer-start]、
[main-start]、
[]、
[header-end main-end footer-end]

注意,当设置了区域后,没有指定网格项使用哪个区域时,网格项会按照排序放置在网格单元中。 也就是说,区域名称一样的网格单元会放置不同的网格项。

grid_网格区域实例2 9-4

查看实例

JavaScript 语法:

object.style.gridTemplateAreas = " 'a b c' 'd e f' 'g h i' " ;