CSS Grid 筆記

2021-10-09 261 words 2 minutes

Contents

CSS Grid 筆記(writed)

推薦新法先看[CSS] 關於 Grid Layout 的使用姿勢，了解觀念在看語法內容比較不會誤會。

grid-auto-flow

先前使用 grid(錯誤觀念)

1

display: grid

就會變縱向，但是因為沒有設定 grid-template,grid-auto-columns所以只會有一列，所以設定上還是了解一下比較清楚。

grid-auto-flow (排序方向)

CSS grid-auto-flow深入理解 « 张鑫旭-鑫空间-鑫生活

grid-auto-flow : row

grid-auto-flow - CSS: Cascading Style Sheets | MDN

fr 是什麼?

首先大家一定要搞清楚一点，1fr 1fr并不等于50% 50%，虽然很多时候表现是一样的，但只是grid格子正好和设定数量一致的时候。1fr 1fr更准确的含义是，可用剩余空间分别50% 50%。

我這邊看到 fr 塞超過 grid 所容量，結果 fr 都那一塊都沒辦法正常顯示，原來是剩餘空間關係造成的。

fr 跟 auto 呢

使用 demo 測試 fr 跟 auto

例用 CSS grid-auto-flow深入理解 « 张鑫旭-鑫空间-鑫生活
裡面「grid佈局實現圖像A|B+C佈局demo」範例來看 grid 的fr 和 auto 差異。

前置作業，使用CSS加圖序號清單。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


zxx-grid zxx-item::before{
  content: "0" counter(section);
  font-weight: bold;
  font-size: 3rem;
  line-height: 1;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

zxx-grid zxx-item{
  position: relative;
  counter-increment: section;
}

使用開發者工具，在後面加入多個圖。

grid-template: 1fr 1fr / 1fr 1fr 1fr

可以看到因為後面加進來的大小都是原圖大小(grid-auto-row,grid-auto-column)，然後所暫空間都用滿了，所以圖片都看不到。

auto auto / auto auto auto

auto會以最小圖來成現。 TODO: 確認

這邊小記一下，寬度會受影響，但高度確不會，因為高度沒有100%的問題。

grid-auto-rows ,grid-auto-columns

其實直接看文件不是很清楚到底是甚麼關係，但去了解關鍵字名稱，再回來看就很清楚。

關鍵字: Grid Implicit vs Explicit Tracks

explicit 的 grid 可以透過 grid-template-columns 和 grid-template-rows 來定義，剩餘多出來的 grid 都視為 implicit grid。
implicit grid 預設的寬度會根據內容的大小來改變，若想改變 implicit grid 的話，可以透過 grid-auto-rows 和 grid-auto-columns 來定義。

參考: [CSS] Grid Layout | PJCHENder 未整理筆記

簡單來說，grid-template 設定出 explicit，超出grid-template 就是 Grid Implicit。上面的範例其實就是 Grid Implicit 。

這個網站有demo範例，CSS Grid 筆記 05-CSS Grid Implicit vs Explicit Tracks | ShunNien’s Blog