---
# System prepended metadata

title: grid

---

# grid

容器（父）
display:grid 
display: inline-grid

子元素會成為grid子元素

grid-item（子）

## 自行設定幾行幾列寬度要多少

定義: 行/列/欄與欄之間距離
*  行：grid-template-columns:100px 200px
*  列：grid-template-row:100px 200px
*  行列:grid-template: 1fr 1fr/1fr 1fr 等於上面兩個一起使用

欄列之間的空隙

* grid-gap

單位：fr (fraction) 佔比：一等份
空白格：.

### 當超出設定列/行時會有實線/虛線差別

實線代表手動畫出的線
使用grid-row/columns是會畫出實線
非grid-row/columns產生的會是虛線

像是grid-template-row:100px 200px ，只設定兩個grid item 的高度多少，那額外的兩個呢？ 就會是虛線

![](https://i.imgur.com/CdTuB6G.png)

虛線的元素要怎麼設定高度？ex:3、4
* grid-auto-rows:10px


虛線元素設定排列
* grid-auto-flow: column;
* grid-auto-columns: 200px;

## 控制grid子元素範圍

子元素：設定grid-column / grid-row

設定哪一條隔線開始到哪一條隔線結束(一條通道一個地標)

![](https://i.imgur.com/KtwDEsj.png)




## gird-template-area
網格內區域名稱
gird-template-area:
    "one two three four "
    "2-1 2-2 2-3 2-4"
    "3-1 3-2 3-3 3-4"
    "4-1 4-2 4-3 4-4"

可以創造出4列4行
“header header header header"
"main main . sidebar"
"footer footer footer footer"
每一列都要相同數量

row gap:column和column之間的間距
column gap：row和row之間的間距
沒有row-gap指定，它被設置為相同的值column-gap




# 8 css repeat fuction 
repeat() 用在grid-template-columns和grid-template-row

mdn:https://developer.mozilla.org/zh-CN/docs/Web/CSS/repeat()

不能使用
The repeat() notation can’t be nested.
Automatic repetitions (auto-fill or auto-fit) cannot be combined with intrinsic or flexible sizes.
![](https://i.imgur.com/UpVOWl1.png)


width:500px
grid-template-columns:1fr 1fr 1fr 1fr 1fr;
等於grid-template-columns:repeat(5,1fr);
grid-gap:10px

粉紅色box寬度算法：500px-50px(gap)=460/5=92px
![](https://i.imgur.com/6eD8yMY.png)

grid-template-columns:repeat(5,30px 10px 60px)
![](https://i.imgur.com/iMdWLuI.png)

神秘的auto 
 grid-template-columns:repeat(5,10px auto ); 

![](https://i.imgur.com/xmr5XW0.png)

5x10=50
gap: 9x10=90

500-140=360

360/5=72


現實是
pink-box
width 70.7
mdn:
auto
作为最大值，等同于 max-content。作为最小值，它代表占据网格轨道的网格项目的最小尺寸的最大值 （如同min-width/min-height所指定的)
As a maximum, identical to max-content. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track.

後來發現auto會根據內容物寬度
![](https://i.imgur.com/hldofgr.png)
當10改成９的時候每一個寬度就會是72px

# 9 控制item位置
## 當有一個item 寬度變大時

```
.container{
  margin:0 auto;
  background:#556B2F;
  width:1000px;
  display:grid;
  grid-gap:10px;
  grid-template-columns:repeat(5,1fr)
}
div{
  background:pink;
  text-align:center
}
.item8{
  width:600px;
}
```
![](https://i.imgur.com/DLRblGn.png)

## 但固定數字
grid-template-columns:repeat(5,100px)

![](https://i.imgur.com/LSRVPiH.png)

9,10仍在位置上也不會影響其他box

## span


```
.item8{
/*   width:600px; */
  grid-column:span 2;
}
```
等同
```
grid-column-start:span 2;
grid-column-end:auto;
```
![](https://i.imgur.com/Ydsmlxu.png)
```
grid-column:span 2;
grid-row:span 2;
```

![](https://i.imgur.com/MII5yzF.png)

`grid-row:span 5;`

![](https://i.imgur.com/CEym1mn.png)
`grid-row:span 6;`
![](https://i.imgur.com/hzg5x0W.png)
`grid-column:span 10;`

![](https://i.imgur.com/LjD3iXZ.png)

變成10個column
因為grid-template-columns:repeat(5,1fr)

第六個之後不在範圍內,會強制創建implict(隱藏) column

# 10

## grid-column-start/grid-column-start-end
grid-column:span 2;
```
grid-column-start:span 2;
grid-column-end:auto;
```
    
也可以利用grid-column-start/grid-column-start-end控制

`grid-column-start:2;`
![](https://i.imgur.com/oeXweFj.png)

grid-column-start:2;
grid-column-end:5;
等於
grid-column:2/5
![](https://i.imgur.com/0r6fLTE.png)
grid-column:2/-1
![](https://i.imgur.com/0U6VBvf.png)
grid-row 同理
但grid-row:1/-1
 會沒出現因為沒有設row
 grid-template-rows:repeat(5,1fr);
 
 規劃成5x5
 
 grid-column:1;
 grid-row:1/-1;
 ![](https://i.imgur.com/m6bZIMc.png)

 但
  grid-column:1/-1;
 grid-rows:1/-1;

![](https://i.imgur.com/zhu8rdS.png)
是占新創隱式grid
隱式寬度根據內容物

codepen:https://codepen.io/pen/

# 11複習前面