Grid 使用 row-gap 設定 Item 垂直間距
Grid 屬於父層設定的 Layout,可直接在父層以 row-gap 設定垂直 Item 間隔。
Grid 屬於父層設定的 Layout,可直接在父層以 row-gap 設定垂直 Item 間隔。
Grid 屬於父層設定的 Layout,可直接在父層以 column-gap 設定水平 Item 間隔。
Grid 屬於父層設定的 Layout,可直接在父層以 gap 設定 Item 間隔。
Grid 屬於父層設定的 Layout,可直接在父層以 grid-template-columns 定義 Column 的寬度與個數。
理論上每個 Element 都可以設定獨立 Class 加以選取,若想在不增加 Class 前提下選取之後所有 Element,可使用 ~ 加以選取。
Grid 屬於父層設定的 Layout,可直接在父層以 grid-template-rows 定義 row 的高度與個數。
在 Main Axis 水平均分 N 個 Column 為實務上常見需求,在 CSS 有多種方式實現。
Grid 為 CSS 最新 Layout 方式,其思維有別於 Flexbox,可完全在父層設定。
理論上每個 Element 都可以設定獨立 Class 加以選取,若想在不增加 Class 前提下選取下一個 Element,可使用 + 加以選取。
若遇到 CSS 相同部分,我們會抽出相同 Class 共用,對於不同部分,可使用 Compound Selector 加以選擇。