Grid 之 auto-fill vs. auto-fit
若想不寫 Media Query 而讓 Grid 自動根據 Browser 寬度改變且換行, 可使用 repeat() 搭配 auto-fill 與 auto-fit 由 Browser 決定 Column 數。
若想不寫 Media Query 而讓 Grid 自動根據 Browser 寬度改變且換行, 可使用 repeat() 搭配 auto-fill 與 auto-fit 由 Browser 決定 Column 數。
fr 除了能處理剩餘寬度外,也可搭配 repeat() 水平均分 Column。
在 Grid 使用 fr 可設定 Column 剩餘寬度比例。
實務上常會出現 Header、Navigation、Main、Aside 與 Footer 等區塊,可使用 grid-template-areas 建立不規則 Layout。
若要將 Object 的所有 Value 轉成 Array,可使用 Object.values()。
CSS 的 Descendant Combinator 與 Child Combinator 都可選擇子層 Element,唯 > 只能明確選擇 子代 Element,而不能選擇 孫代 Element。
透過 grid-column / grid-row 可將 Item 原本在 HTML 位置調整到指定位置。
當使用 List 顯示資料時,若想要資料能黑白相將方便顯示,可使用 :nth-child() 達成。
當使用 List 顯示資料時,若想對最後一列設定不同視覺,可使用 :last-child 達成。
當使用 List 顯示資料時,若想對第一列設定不同視覺,可使用 :first-child 達成。