CSSでグリッド線を表示できますか?

Question

CSS グリッド レイアウトを学習し始めました。理想的な世界では、複数のグリッド ボックスを含む div を設定し、その中に要素を正確に配置し、必要に応じてオーバーレイを提供できるようになります (Illustrator で Grid 上に Sticky を使用するようなものです)。

これは、グリッドを視覚的に表現しないと非常に難しい場合があります。ライブ サーバー上でグリッドを確認することはできますか? Chrome 開発ツールの「グリッド線の表示」を使用してみましたが、更新または変更を行うたびにグリッド線が消えてしまいます。

また、複数の要素と空きスペースで構成されるより正確なレイアウトが必要な場合に使用できる、より良いシステムはありますか?

Answer 1

Firefox ブラウザにはこの機能があります 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 Grid Inspector が言及されていますが、Chrome でもCSS グリッド レイアウト機能 。これらは、レンダリングされた列、行、ギャップなどに関する重要な情報を提供する強力な機能です。

とにかく、CSS を使用して永続的なクロスリフレッシュ メソッドを実装したい場合は、グリッド アイテムに outline のトリックを使用することをお勧めします。アウトラインを使用することをお勧めします。その理由は、アウトラインを使用すると項目が互いに折りたたまれる可能性があるからです (アウトラインは技術的にスペースを占有しないため)。また、アウトラインを動的に表示または非表示にしても、ブラウザーのレイアウトの再計算がトリガーされないからです (テスト中のパフォーマンスが向上しました)。

これは、実際に何が起こるかを示す簡単な例です:

リーリー リーリー