比f(wàn)lex彈性布局更牛逼的，就數(shù)grid布局了。

CSS網(wǎng)格布局（又名“網(wǎng)格”）是一個(gè)二維的基于網(wǎng)格的布局系統(tǒng)，其目的只在于完全改變我們?cè)O(shè)計(jì)基于網(wǎng)格的用戶界面的方式。 CSS一直用來(lái)布局網(wǎng)頁(yè)，但一直都不完美。 一開始我們使用table 做布局，然后轉(zhuǎn)向浮動(dòng)、定位以及inline-block，但所有這些方法本質(zhì)上都是 Hack 的方式，并且遺漏了很多重要的功能（例如垂直居中）。 Flexbox的出現(xiàn)在一定程度上解決了這個(gè)問(wèn)題，但是它的目的是為了更簡(jiǎn)單的一維布局，而不是復(fù)雜的二維布局（Flexbox和Grid實(shí)際上一起工作得很好）。 只要我們一直在制作網(wǎng)站，我們就一直在為解決布局問(wèn)題不斷探索， 而Grid是第一個(gè)專門為解決布局問(wèn)題而生的CSS模塊。

最近在學(xué)習(xí)grid布局，因?yàn)間rid布局太靈活，術(shù)語(yǔ)太多，調(diào)試起來(lái)異常麻煩。強(qiáng)大的chrome瀏覽器沒(méi)有提供任何友好的界面支持，如圖：

已經(jīng)被我拋棄N年之久的firefox卻略微爭(zhēng)氣了一點(diǎn)，如圖：

雖然firefox做的很不錯(cuò)了，但是網(wǎng)格線名字這塊顯示的還是不夠好（其實(shí)只是顯示一堆數(shù)字，而沒(méi)有準(zhǔn)確顯示我代碼里面指定的名字），弄得自己調(diào)試起來(lái)還是很麻煩。

想知道各位小伙伴是怎么調(diào)試grid布局的，有沒(méi)有更加直觀的工具輔助我們調(diào)試呢？