CSS Grid 筆記 14-Grid Template Areas

此篇講述 grid-template-areas 的運用，再利用 media 達到 responsive (自適應)

Demo | Github

Grid Template Areas

首先說明 grid-template-areas ，其 css 如下，顯示畫面如最上面的圖； grid-template-areas 此屬性裡面設定 cell 的區域名稱，同名稱的話表示跨越的幅度，比較特別的是使用 . 這個表示區域名稱的時候，表示這個區域是跳過的，可以參考一下的 jsfiddle 範例

練習的 css 如下：

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-rows: 150px 150px 100px;
    grid-template-areas: 
        "siderbar-1  content  siderbar-2"
        "siderbar-1  content  siderbar-2"
        "footer      footer   footer"
}

.footer {
    grid-area: footer;
}

.container>.item1 {
    grid-area: siderbar-1;
}

.container>.item2 {
    grid-area: content;
}

.container>.item3 {
    grid-area: siderbar-2;
}

既然已經設定好了區域，再利用 @media 就可以透過不同的尺寸來調整畫面表格的分布

@media (max-width: 700px) {
    .container {
        grid-template-areas: 
        "content  content  content"
        "siderbar-1  siderbar-1  siderbar-2"
        "footer      footer   footer"
    }
}

grid-template-areas 除了上述的設定之外，還可以針對 column 或是 row 進行設定，搭配 grid-template-areas 設定的區域名稱，此區域名稱可以替代數字的編號，以這些區域名稱來進行 column 或是 row 的跨越設定

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-areas:
    "💩 💩 💩 💩 🍔 🍔 🍔 🍔"
    "💩 💩 💩 💩 🍔 🍔 🍔 🍔"
    "💩 💩 💩 💩 🍔 🍔 🍔 🍔"
    "💩 💩 💩 💩 🍔 🍔 🍔 🍔";
}

.item3 {
    grid-column: 💩-start / 🍔-end;
    grid-row-end: 💩-end;
}

線上展示

筆記與備註事項

需要注意的是 grid-template-areas 裡面的區域名稱設定的區塊必須都是矩形，否則 grid-template-areas 設定會無效

grid-template-areas

The grid-template-areas CSS property specifies named grid areas.
資料來源 - MDN

@media

@media CSS at-rule 與一組被大括弧隔開、並由 media query 條件定義的 CSS 巢狀區塊有關。@media at-rule 不只能用在最頂層的 CSS 區塊，也能在任何 CSS conditional-group at-rule 使用。

@media at-rule 能透過 CSS object model 介面 CSSMediaRule 通行。
資料來源 - MDN

參考資料

• CSS-Grid 課程
• 作者 Wes Bos CSS-Grid Github
• 我的 CSS-Grid 練習Github