Hina Chen

Hina Chen

偏執與強迫症的患者，算不上是無可救藥，只是我已經遇上我的良醫了。

[12th 鐵人賽] 這不是 Media Query, Day 16

6 min read CSSMedia QueryGrid LayoutGrid SystemFlexboxITHome鐵人賽2020
Media Query 這件事情應該是講到爛掉了，我們稍微複習一下就好， @media (min-width: 32rem) {} > 收工（欸）！ 爾或者是， /* 請不要這樣做 */ @media (min-width: 90ch) {} > 等等好歹也解釋一下 ch 好的，這邊這個單位 ch 是一種字元長度單位，但是他不代表你的 字有多長，以下是 w3c [https://www.w3.org/TR/

[12th 鐵人賽] Grid 格線系統 Part 5, Day 15

5 min read CSSITHome鐵人賽2020Grid LayoutGrid SystemMedia Query
關於自動這件事 我們昨天有提到 dense 這件事情，我們今天繼續腦補一下這個東西該怎麼把玩。首先，先以一個簡單的例子來開場，這是沒有使用 dense 的設定所產生的畫面， 在這邊我們只有把 .item-2 跟 .item-3 動過手腳， .grid .item-2 { grid-row: 1 / span 2; grid-column: 1 / span 3; background: orange; } .grid

[12th 鐵人賽] Grid 格線系統 Part 4, Day 14

6 min read CSSGrid LayoutGrid SystemITHome鐵人賽2020
對齊與補白 基本上在格線系統當中，對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了（欸不是）。對齊系列基本上可用的有， 屬性預設使用姿勢justify-items, align-itemsnoemal容器區塊內的對齊、填滿相關設定。place-items-上述兩個屬性的集合寫法 align-items / justify-itemsjustify-content, align-contentnormal容器內兩個軸向對齊、填滿相關設定。 place-content-上述兩個屬性的集合寫法 align-content / justify-contentalign-self, justify-

[12th 鐵人賽] Grid 格線系統 Part 3, Day 13

8 min read Grid LayoutGrid SystemCSSITHome鐵人賽2020Media Query
間隔、間隔、間隔 先不囉唆，上圖。 中間看起來比較密集的部分，就是所謂的 間隔，在樣式表當中就是這樣設定， .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 1rem; } 這邊能夠接受的數值除了 fr 不能用以外，其他數字你要怎麼寫都可以。你也可以把間隔設定的比元件尺寸還要大，但是應該不會有人做這種事情吧。