###### tags: `css` `Grid Layout`
# CSS Grid Layout 初入介紹
CSS Grid Layout
有人稱為網格佈局

簡而言之就是將畫面切割成若干方格
再依照網格的行列放進方塊裡面

CSS Grid Layout 可以處理二維排版（欄與列）
Flex僅能處理 欄或列
但 CSS Grid 能與 Flex 一起使用

## 學習管道
[CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)

[css-tricks](https://css-tricks.com/difference-explicit-implicit-grids/)

[卡斯伯 - CSS3 Grid Layout](https://wcc723.github.io/life/2017/05/24/css-grid/)

[Lobster 亂七八糟筆記 - Grid Layout 入門](http://lobster0429.logdown.com/posts/1116398)

[CSS Grid布局：快速入门](https://www.w3cplus.com/css3/css-grid-layout-quick-start-guide.html)

[Grid 種田小遊戲](http://cssgridgarden.com/)

[Demo01](https://codepen.io/midorin6497/pen/brQWee?editors=1100)

## 術語
在整個網格中常用到的術語有：
網格線（Grid lines）
水平或縱向網格軌道（Grid tracks）
網格軌道其實就相當於直行（rows）和橫列（columns）
而且兩者之間有一個間距（Gutters）
在網格軌道相交的區域就是單元格（Grid cells）

## 名詞簡單介紹
### 外層屬性
- `grid-template`
- `grid-template-columns`
- `grid-template-rows`
- `grid-template-areas`

- `grid-gap`
- `grid-column-gap`
- `grid-row-gap`

### 內層屬性
- `grid-column`
- `grid-column-start`
- `grid-column-end`

- `grid-row`
- `grid-row-start`
- `grid-row-end`

- `grid-areas`

- `grid-gap`
- `grid-column-gap`
- `grid-row-gap`

### 對齊
- 外層
- `justify-item`
- `align-item`
- `justify-content`
- `align-content`

- 內層
- `justify-self`
- `align-self`