CSS Grid 筆記 04-CSS Grid Dev Tools

CSS Grid Dev Tools ， 顧名思義就是介紹開發者工具，主要是使用 firefox 的開發者工具

Demo | Github

CSS 的範例程式跟前幾次相同，主要是觀察在 grid 配置下的畫面區塊，以及 gap 的間距

範例

.container {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 100px 200px;
}

在開發者工具中，選擇檢測，在選擇版面，可以選擇覆蓋格線與格線顯示選項，在每個元素上都可以再點選區塊顯示

說明顯式邊線(explicit track)與隱式邊線(implict track)，還有網格間格(gap)

參考資料

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