切版

[CSS] 瀑布流難題

寫在最前面,多數情況下,網站的內容使用瀑布流的呈現方式並不多。而這種呈現方式,我記得好像是因為 Pinterest 而紅起來的(有錯誤請指正)。 為何說是難題?我只是想用這個來解釋 Flexbox, Grid 遇到的困難點。 -------------------------------------------------------------------------------- 瀑布流流去哪? 給我一個 Box 這個埂知道就知道,不知道的不要問。之所以叫做 瀑布 故名思義,就是由上到下(由左到右)的一種排列方式。主要是用於呈現 卡牌類型 的內容,每一張卡牌的寬度是相同的,然後高度不同,所以由上到下依序排列出 多欄 式的結構。

[CSS] 關於 Grid Layout 的使用姿勢

CSS Grid 其實已經不是什麼很新的東西,只是最近看到有一個實驗性功能,被 Chrome 正式版本採用,覺得好像應該來寫一個筆記文來記錄一下。順便當作是小小的教學文章也可以,反正 CSS 對我來說也從來沒有真正熟悉過。 Grid 網格系統 CSS 自從 Level 3 之後,後續所有發展的項目,都有屬於自己的 Level。所以 CSS Grid 自然就會有自己的一套。正式的名稱叫做 CSS Grid Layout Module Level 1