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; }