ナビゲーション要素は表示の影響を受けません: グリッド

Question

ナビゲーションバーにグリッド表示に設定されたいくつかの ul li 要素がありますが、期待どおりに動作しません。 li 要素は、グリッドが適用されていないように見えます。

これはコードです:

リーリー リーリー

しかし、grid-container クラスを nav の代わりに ul 要素に適用すると、正常に動作します。

誰かがその違いを説明できますか?ナビゲーションをグリッド表示に設定したい場合、どうすればよいですか?

Answer 1

nav には子要素 (ul) が 1 つしかないため、(display:grid) の効果は ul にのみ表示されます。li をグリッド ボックスとして扱いたい場合は、ul にクラス (grid-container) を追加する必要があります。ナビゲーションの代わりに正しい効果を得る

表示グリッドの効果は子要素にのみ表示されるため、li は nav の子要素ではないため、表示グリッドを nav に追加して li での効果を確認することはできないことに注意してください。

次のコードを参照してください

リーリー リーリー