Grid Layout

[CSS] Flex/Grid Layout Modules, part 6

[CSS] Flex/Grid Layout Modules, part 6

12 min read CSS2021鐵人賽Grid Layout
> 你如果會用 Excel，那 Grid 就應該不陌生。 不過老實講，我也不太會用 Excel。 Grid Layout Module 其實他已經 CR 好一陣子了，目前多數主流的 CSS 框架已經開始採用。所以並不是你不會用或是沒有使用到這個東西，而是你已經在用了，但是你不知道他背後是使用 Grid Layout 而已。 caniuse grid layout Level 1Grid 的基本結構就跟我剛剛提到的 Excel 很像，他是一個矩形區塊，包含了欄與列的設定。

[CSS] Flex/Grid Layout Modules, part 0

4 min read CSSGrid LayoutGrid SystemFlexbox鐵人賽2021
> 萬事起頭難，只要不起頭，就一點都不難了。 在這個充滿著 CSS Frameworks 的年代，人人有功練，人人有版切，身為老屁股的我只能在沙灘上曬乾，而且還賣不到錢。 鐵人賽就當作自己還有在喘氣的證明。 -------------------------------------------------------------------------------- 前言 其實寫 CSS 框架應該比較多觀眾，但就一個碼農來說，自己動手做會比較有趣一點。而且那些框架實在有點五花八門，就是你去 Google 一些關鍵字，諸如「超好用」「XX 天就上手」「20XX 熱門框架」然後就會跑出一堆。 > 我沒有阻止你用，只要能賺錢的框架就是好框架。 君不見

[12th 鐵人賽] 還在吵架的 subgrid, Day 29

1 min read CSSITHome鐵人賽2020CSS3CSS Media Query Level 4Media QueryGrid LayoutGrid System
Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定，在 w3c [https://www.w3.org/TR/css-grid-2/#subgrids] 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 * 遵從父層格線系統，跳出現有維度形成單一欄（或行）的區塊。 * 子格線系統跟父層格線系統共享格線設定。 * 子格線系統格線總量與他所跨維度的父層格線軌跡相同。 * 若子網格系統跨維度軌跡固定，則取父層格線軌跡的跨度起始值。 * 若子網格系統跨維度不固定，則取父層格線軌跡跨度起算為 1。 * 子網格系統起算的 <數字> - <位置> 是獨立在自己的網格系統內。 * 子網格若是被填充在父層格線系統之前，

[12th 鐵人賽] 所以說那個手機版, Day 27

4 min read CSSCSS Media Query Level 4Media QueryRWDAWDGrid LayoutGrid SystemFlexbox
Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ > 我認真說，如果你是 AWD 的話，用 Flex 就綽綽有餘。 如果你是採用 RWD 的話，用 Grid 或許比較方便。 當然，這些事情沒有一定的準則，不然你看看大家 Bootstrap 還不是用得很快樂，有人在意他到底是 Grid 還是 Flex 嗎？

[12th 鐵人賽] RWD 的難題 Part 3, Day 26

4 min read CSSITHome鐵人賽2020CSS Media Query Level 4Media QueryRWDGrid LayoutGrid System
從手機版到桌機版 講完一些基礎的 Media Query 之後，我們來看看全部都放在一起的一些情況。單就我們 前幾天 [https://blog.hinablue.me/12th-ithome-ironman-day-23/] 提到的狀況，在那個 .sidebar 屬於手機版或桌機版，所呈現的欄位問題來看。 .gird { grid-template-columns: repeat(auto-fit, [body] minmax(36rem, 1fr) [end]); } 一般來說從這裡開始沒有什麼太大的問題，唯一的狀況就在於，當你的 .sidebar 因為 @media