0
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?
2 antwortet
0
0
正如 @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;
}
123456
Hot-Tools-Tags
Hot Questions
Hot Tools
Sammlung der Laufzeitbibliothek vc9-vc14 (32+64 Bit) (Link unten)
Laden Sie die Sammlung der Laufzeitbibliotheken herunter, die für die Installation von phpStudy erforderlich sind
VC9 32-Bit
VC9 32-Bit-Laufzeitbibliothek für die integrierte Installationsumgebung von phpstudy
Vollversion der PHP-Programmierer-Toolbox
Programmer Toolbox v1.0 PHP Integrierte Umgebung
VC11 32-Bit
VC11 32-Bit-Laufzeitbibliothek für die integrierte Installationsumgebung von phpstudy
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
