CSS 可以显示网格线吗？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

CSS 可以显示网格线吗？

P粉133321839 2024-03-31 20:38:21

[HTML讨论组]

908

我开始学习 CSS 的网格布局。在理想的情况下，我将能够设置一个 div 多个网格框，并将我的元素精确地放置在其中，在需要时提供叠加（有点像在 Illustrator 中使用粘在网格上）。

如果没有该网格的可视化表示，这可能会非常困难，是否可以在我的实时服务器上看到一个网格？我尝试使用 Chrome 开发工具“显示网格线”，但是每当我刷新或进行更改时，它们就会消失。

或者，当我想要拥有由多个元素和空白空间组成的更精确布局时，是否有更好的系统可以使用？

P粉133321839

全部回复(2)

P粉7528260082024-04-01 14:06:13 2楼

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

赞 +0

添加回复

P粉5305192342024-04-01 10:49:38 1楼

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

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>