Firefox DevTools 讓你輕鬆駕馭 CSS Grid
雖然 Bootstrap 等框架帶來了響應式(responsive)Web 設計的革命,但我們還是更喜歡原生的工具。如今,CSS Grid 終於幫我們達成了願望,Firefox 也有非常方便的學習工具。
CSS Grid 讓你以標準的 CSS 打造響應式網站。它非常簡單,不需要JavaScript(雖然我們很愛 JavaScript),也不需要額外的框架。儘管現代人喜好誇大,動不動把網頁設計的新技術形容成足以「改變全局」,但 CSS Grid 真的是革命性的發明,值得深入了解。幸運的是,Mozilla 的設計天后 Jen Simmons 幫大家列出了 CSS Grid 的好用學習資源,讓你可以自學 CSS Grid。
Firefox Nightly 提供極為方便的 CSS Grid DevTools。下載 Firefox Nightly 瀏覽器後,在鍵盤上按 hit ⌘-option-i(Mac)或 control-shift-i(PC)快速鍵,便可啟動 DevTools。Inspector-Layout 面板會列出網頁上所有的網格容器(grid containers),也有簡單的網格疊圖、以視覺化的方式呈現你的網頁佈局。你還能設定客製化的疊層屬性,包括格線(grid line)數目和大小(dimension)等等。

如果你剛開始學 CSS Grid,想要進一步了解怎麼使用,這面板非常好用。
側邊欄也有互動式的網格輪廓(grid outline)。把滑鼠移到 outline上,便可特別突顯頁面中網格的某些部分,並且顯示其大小、區域及定位(position)。
新的「顯示網格區域」(Display grid areas)設定則會呈現出邊界區域(bounding area)與每個相對應單元格(cell)的區域名稱。

最後,Grid Inspector 會呈現出你對 grid container 所做的改變。這讓開發人員可以看到經轉換(translate)、傾斜(skew)、旋轉(rotate)和縮放(scale)處理後的網格格線會出現在頁面上哪個位置。
歡迎造訪 Mozilla Developer Network,取得有關使用 CSS Grid 網頁設計指南。CSS Tricks 網站也提供能幫新手快速入門的絕佳 CSS Grid 資料。
