# 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 屬性在網格容器上設置此行為。
- 教學大綱
- HTML5基礎
- 1-html基礎知識
- 2-語義化結構元素
- 3-語義化文本元素
- 4-鏈接/列表/圖像元素
- 5-表格元素
- 6-表單與控件元素[重點]
- CSS3基礎
- 1-css與html文檔
- 2-css選擇器
- 3-細說盒模型
- Flex布局[精簡版]
- 1-Flex概論
- 2-Flex布局是什么
- 3-Flex基本概念
- 4-Flex容器屬性
- 5-Flex項目屬性
- Flex布局[細說版]
- 1-flex 布局概述
- 2-flex 容器與項目
- 3-flex 容器主軸方向
- 4-flex 容器主軸項目換行
- 5-flex 容器主軸與項目換行簡寫
- 6-flex 容器主軸項目對齊
- 7-flex 容器交叉軸項目對齊
- 8-flex 多行容器交叉軸項目對齊
- 9-flex 項目主軸排列順序
- 10-flex 項目交叉軸單獨對齊
- 11-flex 項目放大因子
- 12-flex 項目收縮因子
- 13-flex 項目計算尺寸
- 14-flex 項目縮放的簡寫
- Flex布局[案例版]
- 1-調整項目順序
- Grid布局[精簡版]
- 1. 常用術語
- 2. 容器屬性
- 3. 項目屬性
- 4. 布局實例
- 1. 經典三列布局
- 2. 媒體查詢
- Grid布局[細說版]
- 1-必知術語
- 2-容器創建與行列劃分
- 3-單元格常用單位
- 4-項目填充到單元格
- 5-項目填充到網格區域
- 6-對齊容器中的所有項目
- 7-對齊單元格中所有項目
- 8-對齊單元格中某個項目
- 9-容器中行與列之間的間距