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