Kann CSS Gitterlinien anzeigen?

Question

Ich habe angefangen, das CSS-Rasterlayout zu lernen. In einer idealen Welt wäre ich in der Lage, ein Div mit mehreren Rasterfeldern einzurichten und meine Elemente genau darin zu platzieren und bei Bedarf Überlagerungen bereitzustellen (ähnlich wie bei der Verwendung von „Sticky on Grid“ in Illustrator).

Ohne eine visuelle Darstellung des Rasters kann dies sehr schwierig sein. Ist es möglich, ein Raster auf meinem Live-Server zu sehen? Ich habe versucht, mit den Chrome Dev Tools „Gitternetzlinien anzeigen“ zu verwenden, aber jedes Mal, wenn ich eine Aktualisierung durchführe oder eine Änderung vornehme, verschwinden sie.

Oder gibt es ein besseres System, das ich verwenden kann, wenn ich ein präziseres Layout bestehend aus mehreren Elementen und Leerraum haben möchte?

P粉752826008 · Answer

火狐浏览器有这个功能 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

P粉530519234 · Answer

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