# CSS
## CSS
參考遊戲:()
```
grid-template-columns:
grid-template-rows:
//grid-template: 水平 / 垂直
grid-column-start:
grid-column-end:
//grid-column: start / end
grid-row-start:
grid-row-end:
//grid-row: start / end
grid-area: rowStart / columnStart / rowEnd / columnEnd
```
## px em rem
參考資料:()
參考資料:()
px 絕對尺寸 設定下去就確定了，不會被其他因素、上下層給變動 em 相對尺寸 跟上層元素的相對大小 1em 等同上層元素， 1.2em 略大一些， 0.8em 略小一些 rem 相對尺寸 rem 只參考這最上層的 HTML 標籤裡的設定(Root)。
瀏覽器默認大小 medium (16px) 所以在沒有特別設定的狀況下，1em = 16 px
```
123
123
123
123
123
123
```
可以看到 20em > 20 rem 這是因為 rem 是和 網頁的根元素(body)去比較 所以他既可以跟body的相對大小，但在網頁裡又是絕對大小。 (比較簡單只要顧好自己，如果調整body，會整個網頁一起變動。)
而em 是跟上一層去比，所以當我在div 設定20後，20em 就會變得更大。 (會比較需要去思考上下的關係)