CSS グリッド レイアウトが壊れるのはなぜですか?

CSS グリッドのグリッド領域の問題のトラブルシューティング

CSS グリッド システムを実装する際には、領域が正しくレイアウトされていることを確認することが重要です。問題が発生した場合は、次の点を確認してください。

一貫した列数の確保

grid-template-areas プロパティを利用する場合、文字列値の列数は同じである必要があります。これは、文字列内の各行指定がグリッド テンプレート内の行に対応し、行指定内の各単語が列に対応するためです。

提供されたコードには、1 つの行に 2 つの列があります ("ロゴfaq") ですが、1 列だけの別の行 ("about-us") があります。この不一致により、レイアウトの問題が発生します。

修正されたコード:

.grid {<br> 表示: グリッド;<br> グリッド テンプレート列: 1fr 1fr;<br> グリッド テンプレート行: 1fr 1fr;<br> グリッド テンプレート エリア: "ロゴ FAQ" "about-us about-us";<br>}<br>

 <div class="logo"></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">LOGO