CSS

[CSS] Flex/Grid Layout Modules, part 16

Media Query 我覺得已經講到快爛掉了,搭配 Grid 說實在話也沒有很不好做的地方。不過,由於 Grid 是「方格系統」,所以你必須要撇開之前使用 Float Position, Flexbox 的那種流向的思維,這是比較令人苦惱的。 像是 Bootstrap 5.1.x [https://getbootstrap.com/docs/5.1/layout/css-grid/] 可以打開 Grid(預設關閉)

[CSS] Flex/Grid Layout Modules, part 15

燙傷了手停了幾天,不過差不多 15 天好像就交代完所有的東西了。剩下的大部分是比較冷門,甚至是 Grid Layout Module Level 2 的事情,雖然支援度還有待商榷,不過還是多少可以講一點。 手是好了點,倒不用太擔心。 -------------------------------------------------------------------------------- Grid 能與不能 如果很有耐心的看到這裡,我就假設大家都已經知道 Grid Layout Module 的基本操作方式。那麼,我們就可以來看看 Grid 到底在哪些情況下,能做到哪些事情,不能做到哪些事情。 首先,可以做得到的地方很多,

[CSS] Flex/Grid Layout Modules, part 14

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

[CSS] Flex/Grid Layout Modules, part 13

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

[CSS] Flex/Grid Layout Modules, part 12

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