2021

A collection of 17 posts

[CSS] Flex/Grid Layout Modules, part 14

[CSS] Flex/Grid Layout Modules, part 14

中秋連假寫稿好像有點不太應景,所以今天不會講太多東西,最後把 Grid 單元的對齊稍微補一下,連假嘛,大家輕鬆一點。 不過武漢肺炎肆虐,大家還是小心為上。 單元的對齊 如同前些日子提及的,其實就只有兩種,第三種是縮寫不太想把他算進來。資料的部分就不再次貼過來,忘記的人請參考 之前的文章,這邊簡單說明一下, 樣式 說明 justify-self 行內或主要軸方向的對齊,以 LTR 來說就是欄(column)方向對齊 align-self 區塊或交叉軸方向對齊,以 Top-to-Bottom 就是列(row)方向對齊

[CSS] Flex/Grid Layout Modules, part 13

[CSS] Flex/Grid Layout Modules, part 13

單元對齊跟留白的部分今天會繼續,定位的問題基本上不出亂子的話就如同昨天說明的。當然,如果再加上對齊跟留白,如果不小心也是會爆炸的。 對於留白問題,我一律設定為 0(欸不是。 填滿(stretch)與留白(margin) 我們現在已經會操作單元軌道來 框住 我們的 Grid 單元了,那麼,那些基本的單元對齊的部分應該使用上就不會有太大的問題。 如果忘記的請自行複習 但是呢,由於軌道邊界設定的關係,所以 Grid 容器指定的對齊、Grid 單元自行指定的對齊,跟 margin 與 stretch 之間就會有不少互相影響的部分。

[CSS] Flex/Grid Layout Modules, part 12

[CSS] Flex/Grid Layout Modules, part 12

今天繼續來講 Grid 單元,昨天提到了對齊基本用法,今天繼續來講對齊與留白。不過一開始,還是先解釋清楚關於格線與單元之間的事情。 總覺得 15 天就會結束了說(笑)。 單元與格線 Grid 容器提供了格線系統,然後每個格線將內容區塊化(blockification)後,產生了 Grid 單元。這是整個 Grid Layout 的運作方式。那麼,對於 Grid 單元來說,格線系統就類似一種邊界,可以指定 Grid 單元在哪些軌道上。 基本的樣式為,

[CSS] Flex/Grid Layout Modules, part 11

[CSS] Flex/Grid Layout Modules, part 11

現在終於可以開始講 Grid 單元的事情了,雖然可以講的事情可能不多,絕大部分會圍繞在造成容器影響的地方,當然基本的東西還是會先帶一下。 只是說講完之後到底能不能滿 30 天呢 XD Grid 單元 首先,他跟 Flexbox 一樣,如果內容單元是包含在 Grid 容器裡面的話,他本身是宣告成 Grid 格式的文本(Grid formatting context),他並不會因為你把他宣告成 Box Module 而轉換成你所知道的區塊元件(Block formatting context),在

[CSS] Flex/Grid Layout Modules, part 10

[CSS] Flex/Grid Layout Modules, part 10

來到了 30 天的三分之一,然後我才剛講完網格容器而已,但是,剩下的東西也不多了,好像要寫滿 30 篇難度有點高。 只好多寫一點廢話了。 間隔、間隔、間隔 當兵有呼過拐拐的應該知道我在講什麼。 這邊的 gap 其實跟 Flexbox 其實是同一套,而且特性也一樣。 Gaps Between Boxes CSS Box Alignment Module Level 3 不要問我為什麼大家都跟 Box Alignment Module

[CSS] Flex/Grid Layout Modules, part 9

[CSS] Flex/Grid Layout Modules, part 9

你以為網格格線告一個段落後,我會開始講網格單元嗎?當然不是啊,我們網格容器都還沒講完呢。剩下一點小東西稍微交代一下就可以了。 放心雷沒有很多。 容器中的隱性軌道設定 前一篇提到隱性格線,在容器中,也有兩個樣式設定是 專門 給隱性軌道使用的。 樣式 預設值 grid-auto-rows auto grid-auto-columns auto 由於兩個設定的可使用數值都一樣,我直接拿出來外面講比較快, 相對尺寸 % fr min-content max-content auto minmax() fit-content() 以上這幾種都是給隱性軌道使用,我快速舉個例子, .grid-container { display: grid; grid-template-columns: