# CSS Grids
---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`

* Flexbox處理的是一個層面的排列
* Grids處理的是兩個層面的排列


------------------

## grid-template-columns : 設定欄位的大小

可以發現整欄左下角的物件也是呈現40%，因為他遵守上面設定的條件 40 30 30



使用一個fr會讓一個物件整個橫排兩個fr就兩個以此類推，repeat的部分(前方是重複幾次，後面是大小)

結果如下圖

在reapeat內部後面也可以這樣使用讓物件呈現 1fr 2fr大小這樣的順序走下去


-----

## grid-column-gap: 1em 很明顯的他會是物件之間欄跟欄之間的空隙大小


grid-row-gap: 1em 行跟行之間的空隙大小


也可以使用縮寫: grid-gap: 1em

行跟欄之間都會出現空隙1em

-------------

## grid-auto-rows: 可以設定所有物件的高度

設定後

設定前


這個指令可以讓如果文字內容太多了會超出物件的話，使用他就可以讓它隨著文字內容縮放
並且只有特定的那一行會做改變而已

------

## justify-items

justify-items:stretch(預設也是這個)

justify-items: start 讓物件靠左


justify-items: center


justify-items: end


-----------

## align-items

align-items:stretch(預設)


align-items:start (上角對齊)


align-items:center(對齊中間)


align-items:end(向下對齊)


align-self 可以個別物件設定不同的定位



---------------

## grid-column/grid-row

這是物件的原始狀態:


當它使用 grid-column: 1/3的時候表示box1會吃到灰色格子數字1號吃到3號，並且把之後的格子往後擠

灰色的點點是給column參考的，黑色的點點是給row參考的



也可以使用gird-row:1/3，它就會往下吃


這邊設定起始點是2到位置4，所以box3呈現成這樣


box4表示了可以讓物件重疊