CSS Grid 网格布局(入门)- 网格项定位 grid-column-start 和 grid-area

在实际使用中,可能对某个网格项的位置有要求,这时就可以用到网格项的定位。 定位时,有项目重叠,则使用 z-index 属性指定项目的重叠顺序。

简单快速入门的 CSS Grid 网格布局教程 - 网格线

grid-column-start 直接指定网格项开始在第几根列网格线,这个属性设置在网格项上:

.item{
	grid-column-start: 2;
}
  • grid-column-start 网格项在第几根列线上开始。
  • grid-column-end 网格项在第几根列线上结束。
  • grid-row-start 网格项在第几根行线上开始。
  • grid-row-end 网格项在第几根行线上结束。
grid_网格定位 10-1

查看实例10-1 查看实例

CSS Grid 网格布局 - 区域 grid-area

网格设置区域,网格项使用属性 grid-area 指定区域。

在设置了区域时,网格线也就被命名好了,可以用网格线名定位。“去查看第9章了解区域”。

/* 网格设置区域 */
.wrap{
	display: grid;
	grid-template-areas:'header header header'
	                    'sidebar main main'
	                    'footer footer footer';
}

/* 网格项使用 */
.head{ grid-area:header; }

/* 等同于 */
.head{
	grid-column-start: header-start; /* = sidebar-start = footer-start */
	grid-column-end:footer-end;      /* = header-end = main-end */
}

/* grid-area简写功能 */
.head{ 
	/*	grid-area: <row-start> / <column-start> / <row-end> / <column-end>; */
	grid-area:1/1/2/4; 
}

grid-area 也能做为简写 :

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;

如果缺省,默认跨越一个网格单元,也就是只占据一个网格单元 :

.item{ grid-area: 2/4 ; }

/* 等同于 */
.item{ grid-area: 2/4/3/5 ; }
grid_网格定位2 9-3

查看实例

CSS Grid 网格布局 - span 关键字

span 关键字,表示开始边框到结束边框跨越了多少网格单元。则默认为1,负整数或0为无效。

.item{
	grid-row-start: span 2;
}
grid_网格项定位3 10-2
.item{
	grid-row-start: span 2;
	grid-row-start: span 2;
}
grid_网格项定位4 10-3

CSS Grid 网格布局 - z-index

当项目重叠后,使用属性 z-index。

定义三列后 :

正常 :

grid_网格项定位_z-index 10-4

定位后重叠,设置 z-index :

.item1{
	grid-column-start: 2;
	grid-row-start: 1;
	z-index: 200;
}
.item2{
	grid-column-start: 2;
	grid-column-end: 4;
	grid-row-start: 1;
	z-index: 100;
}
grid_网格项定位_z-index2 10-5

从图上看,item1在上面。

.item1{ z-index: 100; }
.item2{ z-index: 200; }
grid_网格项定位_z-index3 10-6

从图上看,item2在上面。

CSS Grid 网格布局 - grid-column 和 grid-row

grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写。

grid-row 属性是 grid-row-start 和 grid-row-end 的合并简写。

只是这两个属性目前的主流浏览器还不支持(ie、火狐、Opera、谷歌、Safari)。

.item1{
	grid-column: <grid-column-start> / <grid-column-end>;
	grid-row: <grid-row-start> / <grid-row-end>;
}

如果缺省第二个值,默认跨越一个网格,也就是只占据一个网格单元 :

grid-column: 2;
	
/* 等同于 */
grid-column: 2 / 3;

JavaScript 语法:

object.style.gridColumnStart = "2" ;
object.style.gridColumnEnd = "2" ;
object.style.gridRowStart = "2" ;
object.style.gridRowEnd = "2" ;

object.style.gridArea = "header";