CSS グリッド レイアウトが「grid-template-areas」で期待どおりに動作しないのはなぜですか?

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

CSS グリッドでは、grid-template-areas プロパティによってグリッドの特定の領域が要素に割り当てられます。ただし、このプロパティを使用する場合、レイアウトが期待どおりに表示されないという問題が発生する可能性があります。

よくあるエラーの 1 つは、指定された文字列の列数が、grid-template-columns で定義されているのと同じでない場合です。 。この場合、レイアウトは正しく表示されない可能性があります。

次の例を見てみましょう:

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

この例では、grid-template-areas プロパティは 2 行と 1 列を定義します。ですが、grid-template-columns プロパティは 2 つの列を定義します。この不一致により、予期しない動作が発生します。

これを解決するには、grid-template-areas プロパティの列数が Grid-template-columns プロパティと同じである必要があります。この場合、次のように Grid-template-areas プロパティを変更できます:

grid-template-areas: "logo faq" "about-us about-us";

これにより、レイアウトが定義された列と適切に位置合わせされます。

作業するときは覚えておいてください。 Grid-template-areas、定義された領域の数は、grid-template-rows プロパティと Grid-template-columns プロパティで指定された行と列の数と一致する必要があります。それぞれ。

以上がCSS グリッド レイアウトが「grid-template-areas」で期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。