ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS グリッド領域のレイアウトが正しくないのはなぜですか?

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

DDD
リリース: 2024-12-13 07:56:10
オリジナル
1010 人が閲覧しました

Why is My CSS Grid Area Layout Incorrect?

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.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 番目の行に別の列を追加します。

1

2

3

4

5

6

.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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート