84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我開始學習 CSS 的網格佈局。在理想的情況下，我將能夠設置一個 div 多個網格框，並將我的元素精確地放置在其中，在需要時提供疊加（有點像在 Illustrator 中使用粘在網格上）。
如果沒有該網格的視覺化表示，這可能會非常困難，是否可以在我的即時伺服器上看到一個網格？我嘗試使用 Chrome 開發工具“顯示網格線”，但是每當我刷新或進行更改時，它們就會消失。
或者，當我想要擁有由多個元素和空白空間組成的更精確佈局時，是否有更好的系統可以使用？
火狐瀏覽器有這個功能 https://firefox-source-docs。 mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html
針對您遇到的問題建立了一個錯誤 https://bugzilla.mozilla.org/show_bug.cgi?id=1342310
正如@ashish-singh 已經回答的那樣，利用本機瀏覽器開發人員工具是一個不錯的選擇，例如已經提到Firefox CSS 網格檢查器 ，甚至是Chrome 檢查CSS 網格佈局功能。它們是強大的功能，提供有關渲染的列、行、間隙等的重要資訊。
無論如何，如果您確實想要使用 CSS 實現持久的交叉刷新方法，我建議您在網格項目上使用 outline 的一些技巧。我建議使用輪廓，因為使用它們，項目可以彼此折疊（因為技術上輪廓不佔空間），而且還因為動態顯示和隱藏輪廓不會觸發瀏覽器佈局重新計算（在測試期間性能更好）。
outline
這是一個簡單的範例，展示了實際情況：
.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1px; } .item { display: grid; place-items: center; padding: 1rem; /* Here's the trick: */ outline: 1px dashed magenta; } .col-span-2 { grid-column: span 2 / span 2; } .row-span-2 { grid-row: span 2 / span 2; }
1 2 3 4 5 6
火狐瀏覽器有這個功能 https://firefox-source-docs。 mozilla.org/devtools-user/page_inspector/how_to/examine_grid_layouts/index.html
針對您遇到的問題建立了一個錯誤 https://bugzilla.mozilla.org/show_bug.cgi?id=1342310
正如@ashish-singh 已經回答的那樣，利用本機瀏覽器開發人員工具是一個不錯的選擇，例如已經提到Firefox CSS 網格檢查器 ，甚至是Chrome 檢查CSS 網格佈局功能。它們是強大的功能，提供有關渲染的列、行、間隙等的重要資訊。
無論如何，如果您確實想要使用 CSS 實現持久的交叉刷新方法，我建議您在網格項目上使用
outline的一些技巧。我建議使用輪廓，因為使用它們，項目可以彼此折疊（因為技術上輪廓不佔空間），而且還因為動態顯示和隱藏輪廓不會觸發瀏覽器佈局重新計算（在測試期間性能更好）。這是一個簡單的範例，展示了實際情況：
.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 1px; } .item { display: grid; place-items: center; padding: 1rem; /* Here's the trick: */ outline: 1px dashed magenta; } .col-span-2 { grid-column: span 2 / span 2; } .row-span-2 { grid-row: span 2 / span 2; }