CSS Grid 筆記 15-Naming Lines in CSS Grid

此篇介紹行號的別名運用，目的是使用行號與別名都是一樣的結果

Demo | Github

Naming Lines in CSS Grid

前面幾篇都提到，關於行號的部分，記住使用數字，但是此篇提到了別名，也就是說可以自定義行號的別名，再利用別名去設定，以下先示範不使用行號的 css 與畫面 (html 可以參考以下的線上範例)

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 500px 1fr;
    grid-template-rows: repeat(10, auto);

}
.item3{
    background: slateblue;
    grid-column: 2;
    grid-row: 1/ span 10;
}

使用了行號別名，其定義方式為直接在 grid-template-[columns/rows] 設定。例如： grid-template-columns 中，設定了三個 column ，所以行號會有 4 個，第一個就是第一行， [ ] 內可以放置多個別名，但是都代表同一行號。

grid-template-columns: [line1] 1fr [line2] 1fr [line3] 1fr [line4];

以下就是使用別名取代行號的練習範例

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 
        [sidebar-start site-left] 1fr [sidebar-end content-start] 500px [content-end] 1fr [site-right];
    grid-template-rows: [content-top] repeat(10, auto) [content-bottom];

}
.item3{
    background: slateblue;
    grid-column: content-start;
    grid-row: content-top / content-bottom;
}

線上範例

筆記與備註事項

Layout using named grid lines

In previous guides we’ve looked at placing items by the lines created by defining grid tracks and also how to place items using named template areas. In this guide we are going to look at how these two things work together when we use named lines. Line naming is incredibly useful, but some of the more baffling looking grid syntax comes from this combination of names and track sizes. Once you work through some examples it should become clearer and easier to work with.
資料來源 - MDN

參考資料

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