2020

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

Media Query 這件事情應該是講到爛掉了,我們稍微複習一下就好, @media (min-width: 32rem) {} > 收工(欸)! 爾或者是, /* 請不要這樣做 */ @media (min-width: 90ch) {} > 等等好歹也解釋一下 ch 好的,這邊這個單位 ch 是一種字元長度單位,但是他不代表你的 字有多長,以下是 w3c [https://www.w3.org/TR/css3-values/#ch] 的解釋, > Equal

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

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

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

對齊與補白 基本上在格線系統當中,對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了(欸不是)。對齊系列基本上可用的有, 屬性預設使用姿勢justify-items, align-itemsnoemal容器區塊內的對齊、填滿相關設定。place-items-上述兩個屬性的集合寫法 align-items / justify-itemsjustify-content, align-contentnormal容器內兩個軸向對齊、填滿相關設定。 place-content-上述兩個屬性的集合寫法 align-content / justify-contentalign-self, justify-selfauto區塊內元件對齊、填滿相關設定。place-selfauto上述兩個屬性的集合寫法 align-self / justify-self基本上除了集合寫法,以及 justify-items, justify-self 以外,大抵上就真的跟 Flex 沒什麼差別。在實作面上也是雷同的,當然會遇到的雷也差不多。

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

間隔、間隔、間隔 先不囉唆,上圖。 中間看起來比較密集的部分,就是所謂的 間隔,在樣式表當中就是這樣設定, .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 1rem; } 這邊能夠接受的數值除了 fr 不能用以外,其他數字你要怎麼寫都可以。你也可以把間隔設定的比元件尺寸還要大,但是應該不會有人做這種事情吧。那麼,這個間隔有什麼毛病呢?請你回去看看剛剛那張圖。 > 看到那個精美的內容衝到間隔裡面了嗎? 是的,

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

容器 我們先來看 Grid 的容器,他包含了 一張試算表像是 Table 一樣的東西,為何會說他 像是 Table,我直接舉例給大家看就知道了, .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); } .item1 { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; } HTML