CSS Grid 筆記 10-Placing Grid Items

上一篇提到了 grid-column ，針對此設定還可以延伸為 grid-column-start 與 grid-column-end 的設定方法，以及利用 / 的簡略設定方式

Demo | Github

Placing Grid Items

.poop {
    background: #bada55;
    grid-column-start: 2;
    grid-column-end: 5;
}

也可以使用 grid-column 來表示，利用 / 來區隔 start 與 end 的數字

.poop {
    background: #bada55;
    grid-column: 2/5;
}

除了整數外， / 還可以設定負數，利用 firefox 的 devTool 可以清楚觀看到負數其實就是正數大小的反向

grid-row 也是可以使用此種方式設定，甚至可以直接在 / 的部分指定 span 的數量

.poop {
    background: #bada55;
    grid-column: 1/-4;
    grid-row: 3/span 2;
}

需要注意的是指定 start 與 end 的數值，其資料是必須因應 Explicit Tracks (明確邊線)來劃分，所以當劃分結束後，其餘的資料會變成額外設定

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

.poop {
    background: #bada55;
    grid-column: 1/-1;
    grid-row: 1/-1;
}

筆記與備註事項

grid-column-start

The grid-column-start CSS property specifies a grid item’s start position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement. This start position defines the block-start edge of the grid area.
資料來源 - MDN

grid-column-end

The grid-column-end CSS property specifies a grid item’s end position within the grid column by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the block-end edge of its grid area.
資料來源 - MDN

參考資料

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