CSS グリッド領域のレイアウトが正しくないのはなぜですか?

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

CSS グリッドを使用する場合、グリッド領域が適切にレイアウトされていることを確認することが重要です。ただし、物事が期待通りにいかないこともあります。グリッド領域が正しく表示されないという一般的な問題を調べてみましょう。

グリッド領域のレイアウトが正しくない

次のコードを考えてみましょう。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us";
}

.logo {
  background-color: blue;
  grid-area: logo;
}

.faq {
  background-color: red;
  grid-area: faq;
}

.aboutUs {
  background-color: cyan;
  grid-area: about-us;
}

この例では、2 列 2 行のグリッドを作成したいと考えています。ただし、「about-us」領域は期待どおりにレンダリングされません。

解決策

この問題は、grid-template-areas プロパティの文字列値が必要であるために発生します。グリッド自体と同じ数の列があります。この場合、2 番目の行には 1 つの列しかありませんが、1 番目と 2 番目の領域は別々の列に割り当てられています。

これを解決するには、2 番目の行に別の列を追加します。

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "logo faq" "about-us about-us";
}

これで、エリアは意図したとおりに正しくレイアウトされました。 Grid-template-areas プロパティを使用する場合、適切なグリッド レイアウトには文字列値がグリッド構成と一致していることを確認することが不可欠であることに注意してください。

以上がCSS グリッド領域のレイアウトが正しくないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。