# 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 的高度多少，那額外的兩個呢？ 就會是虛線


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

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

## 控制grid子元素範圍

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

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


## 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.

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

grid-template-columns:repeat(5,30px 10px 60px)

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


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會根據內容物寬度
當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;
}


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


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

## span

.item8{
/*   width:600px; */
  grid-column:span 2;
}

等同

grid-column-start:span 2;
grid-column-end:auto;


grid-column:span 2;
grid-row:span 2;


`grid-row:span 5;`

`grid-row:span 6;`
`grid-column:span 10;`


變成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;`

grid-column-start:2;
grid-column-end:5;
等於
grid-column:2/5
grid-column:2/-1
grid-row 同理
但grid-row:1/-1
會沒出現因為沒有設row
grid-template-rows:repeat(5,1fr);

規劃成5x5

grid-column:1;
grid-row:1/-1;

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

是占新創隱式grid
隱式寬度根據內容物

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

# 11複習前面