---
# System prepended metadata

title: CSS-grid大全
tags: [grid, CSS]

---

# 寫在母元素
## grid
```css=
display: grid;
```
## grid-template-columns
子元素水平方向長度
單位可用:px、fr
寫幾個數字代表水平方向可以排幾個子元素
### 範例
```css=
grid-template-columns: 100px 100px 1fr;
```
水平方向有3個子元素
第1垂直列水平長100px
第2垂直列水平長100px
第3垂直列水平長把剩餘空間占滿
### fr
1fr剩餘空間占滿
## row-gap
上下的間隔
## column-gap
左右的間隔