タグ : CSS
由 Computed 切換 CSS Class
實務上 CSS Class 可能會根據 JavaScript 的邏輯而改變，此時可將 CSS Class 綁定到 Computed，並將邏輯寫在 Computed 內。
Flexbox 使用 justify-content space-evenly 令 Column 間隔相等
若希望 Browser 能自動均分 section 剩餘寬度，可使用 justify-content 的 space 系列設定。
Flexbox 使用 justify-content space-between 令 Column 間隔相等
若希望 Browser 能自動均分 section 剩餘寬度，可使用 justify-content 的 space 系列設定。
Flexbox 使用 justify-content flex-end 水平靠右
若希望能對 Main Axis 方向靠右，可使用 justify-content flex-end 設定。
Flexbox 使用 justify-content flex-start 水平靠左
若希望能對 Main Axis 方向靠左，可使用 justify-content flex-start 設定。
Grid 使用 justify-content space-evenly 令 Column 間隔相等
Grid 若要使 Column 之間的間隔相等，可使用 justify-content space-evenly。
Grid 使用 justify-content space-around 令 Column 間隔相等
Grid 若要使 Column 之間的間隔相等，可使用 justify-content space-around。
Grid 使用 justify-content space-between 令 Column 間隔相等
Grid 若要使 Column 之間的間隔相等，可使用 justify-content space-between。
Grid 使用 justify-content center 水平置中
Grid 若要使 Column 或 Content 水平置中，可使用 justify-content center。
Grid 使用 gap 與 fr 自動決定 Column 寬度
傳統會將 Column 寬度設定為 % 使其依比例顯示，但若設定 column-gap 後，則要改用 fr 才能依比例顯示。
Grid 水平均分 Column 但保有最小寬度
雖然可使用 repeat(n, 1fr) 實現水平均分 Column，但實務上可能想要 Column 數不變，雖然 Column 可變小但仍有其最小寬度，可用 repeat() 搭配 minmax() 實現。
Grid 之 auto-fill vs. auto-fit
若想不寫 Media Query 而讓 Grid 自動根據 Browser 寬度改變且換行， 可使用 repeat() 搭配 auto-fill 與 auto-fit 由 Browser 決定 Column 數。
Grid 使用 grid-template-areas 建立不規則 Layout
實務上常會出現 Header、Navigation、Main、Aside 與 Footer 等區塊，可使用 grid-template-areas 建立不規則 Layout。
CSS 之 Child Combinator >
CSS 的 Descendant Combinator 與 Child Combinator 都可選擇子層 Element，唯 > 只能明確選擇 子代 Element，而不能選擇 孫代 Element。
Grid 使用 grid-column 與 grid-row 調整 Item 位置
透過 grid-column / grid-row 可將 Item 原本在 HTML 位置調整到指定位置。
Grid 使用 repeat() 設定 Columns
Grid 常在 grid-template-columns 使用多個 auto 設定 Columns，可使用 repeat() 更精簡。
Grid 使用 grid-template-columns 設定 Columns
Grid 屬於父層設定的 Layout，可直接在父層以 grid-template-columns 定義 Column 的寬度與個數。
CSS 之 General Sibling Combinator ~
理論上每個 Element 都可以設定獨立 Class 加以選取，若想在不增加 Class 前提下選取之後所有 Element，可使用 ~ 加以選取。
Grid 使用 grid-template-rows 設定 Rows
Grid 屬於父層設定的 Layout，可直接在父層以 grid-template-rows 定義 row 的高度與個數。