CSS 可以顯示網格線嗎？

Question

我開始學習 CSS 的網格佈局。在理想的情況下，我將能夠設置一個 div 多個網格框，並將我的元素精確地放置在其中，在需要時提供疊加（有點像在 Illustrator 中使用粘在網格上）。

如果沒有該網格的視覺化表示，這可能會非常困難，是否可以在我的即時伺服器上看到一個網格？我嘗試使用 Chrome 開發工具“顯示網格線”，但是每當我刷新或進行更改時，它們就會消失。

或者，當我想要擁有由多個元素和空白空間組成的更精確佈局時，是否有更好的系統可以使用？

Answer 1

火狐瀏覽器有這個功能 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

Answer 2

正如@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;
}

  
1
  
2
  
3
  
4
  
5
  
6