比flex彈性布局更牛逼的，就數(shù)grid布局了。CSS網(wǎng)格布局（又名“網(wǎng)格”）是一個二維的基于網(wǎng)格的布局系統(tǒng)，其目的只在于完全改變我們設(shè)計基于網(wǎng)格的用戶界面的方式。 CSS一直用來布局網(wǎng)頁，但一直都不完美。 一開始我們使用table 做布局，然后轉(zhuǎn)向浮動、定位以及inline-block，但所有這些方法本質(zhì)上都是 Hack 的方式，并且遺漏了很多重要的功能（例如垂直居中）。 Flexbox的出現(xiàn)在一定程度上解決了這個問題，但是它的目的是為了更簡單的一維布局，而不是復(fù)雜的二維布局（Flexbox和Grid實際上一起工作得很好）。 只要我們一直在制作網(wǎng)站，我們就一直在為解決布局問題不斷探索， 而Grid是第一個專門為解決布局問題而生的CSS模塊。最近在學(xué)習(xí)grid布局，因為grid布局太靈活，術(shù)語太多，調(diào)試起來異常麻煩。強(qiáng)大的chrome瀏覽器沒有提供任何友好的界面支持，如圖：已經(jīng)被我拋棄N年之久的firefox卻略微爭氣了一點，如圖：雖然firefox做的很不錯了，但是網(wǎng)格線名字這塊顯示的還是不夠好（其實只是顯示一堆數(shù)字，而沒有準(zhǔn)確顯示我代碼里面指定的名字），弄得自己調(diào)試起來還是很麻煩。想知道各位小伙伴是怎么調(diào)試grid布局的，有沒有更加直觀的工具輔助我們調(diào)試呢？