gird佈局筆記9——項目屬性1

先複習一下網格線的概念

上圖是2行2列的容器佈局，水平網格線（row line）有3條，垂直網格線（column line）也是3條，如上圖所示即——n行有n+1根水平網格線，m列有m+1根垂直網格線。每根水平線都會相應的獲得一個“名字”，如上圖所示的1，2， 3 （之前的筆記有說過可以使用grid-template-columns屬性和grid-template-rows屬性指定每一根網格線的名字，而且網格佈局允許一根線有多個名字（但是水平網格線與水平網格線之間的名字不能重複，垂直網格線也是如此），如果重複，就會產生混亂。例如兩根不同的水平網格線都有一個相同的名字，那麼當用到這個名字的時候，該選哪一條？）。

今天我們所說的項目屬性就是基於網格線而產生作用的。之前的筆記就提到過項目大小的設定，不僅是項目的大小可以設定，項目的位置也是可以設定的，具體的方法就是指定項目的四個邊框，分別定位在哪根網格線。

• grid-column-start屬性：左邊框所在的垂直網格線
• grid-column-endt屬性：右邊框所在的垂直網格線
• grid-row-start屬性：上邊框所在的垂直網格線
• grid-row-start屬性：下邊框所在的垂直網格線

我們看一段代碼

 style="background: rgb(209 186 116);
 grid-column-start: 2 ;
 grid-column-end: 4"
>
 1

上面代碼中，我們為項目1指定了左邊框在第2根垂直網格線，右邊框在第4根網格線。看一下具體效果

因為沒有指定上下邊框，所以項目1採用默認位置，即上邊框是第一根水平網格線，下邊框是第二根水平網格線。（而指定左右邊框也是指定了項目的長，指定上下邊框 就是指定項目的寬）而剩餘項目的佈局由瀏覽器自動完成，由grid-auto-flow屬性決定，這裡就不多提了，有疑問可以複習一下筆記5。下面指定四個邊框。

 style="background: rgb(209 186 116);
 grid-column-start: 1 ;
 grid-column-end: 3;
 grid-row-start:2;
 grid-row-end: 4"
>
 1

這四個屬性的值，除了指定為默認的網格線名字外，你還可以使用自己指定的網格線名字，至於網格線名字怎麼指定，一種方法是使用grid-template-rows屬性和grid-template-columns屬性指定，像這樣——

grid-template-columns: [c1] 100px [c2] 100px [c3] 100px;

上面代碼就為第一根垂直網格線指定了名字c1，第二根垂直網格線指定了名字c2，第三根垂直網格線指定了名字c3。

另外一種是grid-template-areas屬性，當你定義了區域（area）之後，每個區域的起始網格線，就會自動命名為區域名-start，終止網格線自動命名為區域名-end，例如命名了一個區域為e，那麼e的左邊框和右邊框所在的垂直網格線的名字分別為e-start、e-end。上下邊框所在的水平網格線名字分別為e-start、e-end。

另外四個屬性的值還可以使用span關鍵字，表示“跨越”，就是左右邊框（上下邊框）之間跨越多少個網格。

 style="background: rgb(209 186 116);
 grid-column-start: span 2 ;
>
 1

 

上面的代碼表示，1號項目的左邊框和右邊框之間跨越了兩個網格。

grid-column-start：span 2和grid-column-end：span 2的代碼效果都是一樣的。都表示左右邊框之間跨越兩個網格。

如果使用這四個屬性出現了項目的重疊，可以使用z-index屬性指定項目的重疊順序。

以上就是筆記9的所有內容。