上篇部落格中提到了乙個案例，那個案例是按照瀏覽器百分百顯示的，因此，網格的每個份數佔的都很大，這時使用fr單位就會有乙個問題，這個問題只有垂直方向受影響，水平方向什麼時候使用fr單位都不會出現問題。
當網格中的每乙個格佔的很大時，垂直方向的fr就會失效，導致網格垂直方向比例失調，並不是所設定的佔多少份。
解決方案：
1.把換成背景圖的方式新增到網格中；
2.把fr換成對應份數的百分比。比如三行的網格，如果等分的話，那麼每行設定成33%。
第一張圖為正常的執行結果，第二張圖為fr問題出現時的執行結果。仔細觀察就會發現，第二張圖中網格中的圖失去比例，全部壓扁了，這就是fr的問題所在，如果有博友想要使用網格布局做這種大框布局的話，務必注意這個問題。
css 網格布局 CSS網格布局簡介
css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...
Grid布局（網格布局）
網格布局 grid 是 css 中乙個布局方案。它將網頁劃分成乙個個網格，可以任意組合不同的網格，做出各種各樣的布局。以前，只能通過複雜的 css 框架達到的效果，現在瀏覽器內建了。下面這樣的布局，就是grid布局。grid 布局與 flex 布局有一定的相似性，都可以指定容器內部多個專案的位置。但...
網格布局（grid布局）
他可以將頁面分為多個網格，可以任意組合不同的網格 做出各種各樣的布局。網格布局為二維性質的。grid row gap 1rem 行間距 grid column gap 1rem 列間距 grid gap 1rem 設定行列間距 grid template columns 列寬和列數 grid tem...