# Grid Items 屬性 [TOC] ## 1. grid-column-start / grid-column-end / grid-row-start /grid-row-end 使用特定的網格線確定 grid item 在網格內的位置。grid-column-start/grid-row-start 屬性表示grid item的網格線的起始位置，grid-column-end/grid-row-end屬性表示網格項的網格線的終止位置。 值： * `<line>`: 可以是一個數字來指代相應編號的網格線，也可使用名稱指代相應命名的網格線 * `span <number>`: 網格項將跨越指定數量的網格軌道 * `span <name>`: 網格項將跨越一些軌道，直到碰到指定命名的網格線 * auto: 自動布局， 或者自動跨越， 或者跨越一個默認的軌道 ```css .item { grid-column-start: <number> | <name> | span <number> | span <name> | auto grid-column-end: <number> | <name> | span <number> | span <name> | auto grid-row-start: <number> | <name> | span <number> | span <name> | auto grid-row-end: <number> | <name> | span <number> | span <name> | auto } ``` 舉例： ```css .item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start grid-row-end: 3 } ``` - 項目在網格中的起始位置  ```css .item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2 grid-row-end: span 2 } ```  如果沒有聲明 grid-column-end / grid-row-end，默認情況下，該網格項將跨越1個軌道。 網格項可以相互重疊。 您可以使用z-index來控制它們的堆疊順序。 --- ## 2. grid-column / grid-row grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end 的簡寫形式。 值： * `<start-line>` / `<end-line>` – 每個值的用法都和屬性分開寫時的用法一樣 ```css .item { grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>; } ``` 舉例： ```css .item-c { grid-column: 3 / span 2; grid-row: third-line / 4; } ```  **如果沒有指定結束行值，則該網格項默認跨越1個軌道。** --- ## 3. grid-area 給 grid item 進行命名以便于使用 grid-template-areas 屬性創建模板時來進行引用。另外也可以做為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫形式。 值： * `<name>` – 你的命名 * `<row-start>` / `<column-start>` / `<row-end>` / `<column-end>` – 可以是數字，也可以是網格線的名字 ```css .item { grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; } ``` 舉例: 給一個網格項命名 ```css .item-d { grid-area: header } ``` 作為 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的簡寫: ```css .item-d { grid-area: 1 / col4-start / last-line / 6 } ```  --- ## 4. justify-self 沿著行軸對齊grid item 里的內容（與之對應的是 align-self, 即沿列軸對齊）。 此屬性對單個網格項內的內容生效。 值： * start – 將內容對齊到網格區域的左端 * end – 將內容對齊到網格區域的右端 * center – 將內容對齊到網格區域的中間 * stretch – 填充網格區域的寬度 (這是默認值) 舉例： ```css .item-a { justify-self: start; } ```  ```css .item-a { justify-self: end; } ```  ```css .item-a { justify-self: center; } ```  要為網格中的所有grid items 設置對齊方式，也可以通過 justify-items 屬性在網格容器上設置此行為。 --- ## 5. align-self 沿著列軸對齊grid item 里的內容（與之對應的是 justify-self, 即沿行軸對齊）。 此屬性對單個網格項內的內容生效。 值： * start – 將內容對齊到網格區域的頂部 * end – 將內容對齊到網格區域的底部 * center – 將內容對齊到網格區域的中間 * stretch – 填充網格區域的高度 (這是默認值) ```css .item { align-self: start | end | center | stretch; } ``` 舉例: ```css .item-a { align-self: start; } ```  ```css .item-a { align-self: end; } ```  ```css .item-a { align-self: center; } ```  ```css .item-a { align-self: stretch; } ```  要為網格中的所有grid items 統一設置對齊方式，也可以通過 align-items 屬性在網格容器上設置此行為。