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

CSS グリッド: グリッド領域が適切にレイアウトされない

CSS グリッド システムでは、grid-template-areas プロパティを使用して定義できます。グリッド内の名前付きエリア。ただし、このプロパティを使用すると問題が発生し、グリッド領域のレイアウトが不適切になる可能性があります。

問題:

grid-template-areas プロパティを使用してグリッド領域を定義する場合、予期しないレイアウトが発生します。次のコードはこの問題を示しています。

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

このコードは、最初の行に「logo」と「faq」という名前の 2 つの領域、2 番目の行に「about-us」という名前の領域を持つ 2x2 グリッドを定義します。行。ただし、レイアウトは意図した構成と一致しません。

解決策:

この問題は、grid-template-areas プロパティの列数が正しくないことが原因で発生します。プロパティ内の各文字列には、grid-template-columns で定義されているのと同じ数の列が必要です。この場合、プロパティは 1 つの列のみを指定しますが、グリッドは 2 つの列で定義されています。

問題を解決するには、追加の文字列を使用して「about-us」領域を 2 つの列に分割する必要があります。

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

この調整により、グリッド領域は意図した構成に合わせて適切にレイアウトされます。

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