Grid CSS 筆記

CSS 這東西感覺非常容易忘記，跟咒語一樣。grid 這個系列的排版方式，看起來很強大，而且主流瀏覽器的 devtools 也對他的整合性越來越好了，是時候學了吧。

https://dev.to/simonpaix/css-grid-cheat-sheet-2ll8

Body

因為我連基本的 css 都不太會。先從這個 css grid 基本範例開始查看。整體置中效果可用以下來訂。

max-width: 960px;
margin: 1em auto;

Container

使用 display: grid 宣告目前這層內部使用 grid 排版。minmax(200px,1fr) 表示最小一格 200px ，如果內容比較多最多可以到 1fr 。fr 表示的是目前剩下還可用空間中的一份。 gap 表示 columns/rows 之間的間隔。auto-fill 表示如果還能填的話，就繼續加滿 row 。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 20px;
}

Item

這好像沒什麼好說的， border-radius 可以有圓角效果。其他都很常見。

padding: 10px;
border: 5px solid rgb(17, 105, 121);
background-color: rgba(17, 105, 121,.1);
border-radius: 5px;

border-box

不想要因為調整 padding 導致框框變大，破壞排版。可以全域使用 border-box 。

* { box-sizing: border-box; }

以上的基本效果可以把 items 排列整齊，達到這 row 排不滿就換下一個 row 排的效果。

Intrinsic sizing