网格布局中项目属性应用与效果.pdfVIP

五.作用在项目上的属性

1.grid‑row：设置项目占用网格内的行位置。grid‑row是一个复合属性，由

grid‑row‑start（行起始的网格线位置）和grid‑row‑end（行结束的网格线位置）组

成。案例：

起始代码：

效果：

(1)为第一个div设置grid‑row‑start:1;grid‑row‑end:

4;效果

五.作用在项目上的属性

1.grid-row:设置项目占用网格内的行位置

grid-row是一个复合属性，由grid-row-start(行起始的网格线位置)和grid-row-

end（行结束的网格线位置）组成

案例：

起始代码：

效果：

（1）给第一个div设置grid-row-start:1;grid-row-end:4;

效果

(2)为第二个div设置grid‑row‑start:r2;grid‑row‑end:r4;

效果：

2.grid‑column：设置项目在网格内占用的列位置

grid‑column是一个复合属性，由grid‑column‑start（列起始的网格线位置）和

grid‑column‑end（列结束的网格线位置）组成

案例：