グリッドレイアウト（CSS Grid）で謎の余白が発生した時に設定するプロパティ

WRITER

Sasayama Sayaka ディレクター

ディレクター。ウェブデザイン技能士（2級）／HTML5プロフェッショナル認定資格レベル1・レベル2。

グリッドレイアウト（CSS Grid）を使い始めた時、意図しない謎の余白が発生して困ったことがあります。
今回のブログはその時の原因と対応についての備忘録です。

グリッドレイアウトのgrid-template-rowsの設定を説明する画像①　grid-template-rowsを設定しない場合に予期せぬ余白が発生することがある

記のようにグリッドレイアウトの表の下にボタンを配置した時、なぜか大きな余白が発生して「なぜ？」となりました。
理由を調べると、「grid-template-rows」というプロパティの設定をしていなかったことが原因でした。

横行の高さを指定するプロパティです。
初期値は「none」です。

グリッドレイアウトのgrid-template-rowsの設定を説明する画像② grid-template-rowsを設定しない場合にすべてのグリッドアイテムの高さは自動で同じになる

グリッドアイテムの高さが異なる場合、自動で高さを調整したい場合は「grid-template-rows: auto;」を指定すると予期せぬ余白に悩まされることがなくなります。

グリッドレイアウトはプロパティが多く、考えた通りのレイアウトにするのが難しいこともあります。
とりあえず私のようにflexのような感覚で使っていると上記のような事態に陥りやすい気がするので、備忘録として記録しておきます。

JOURNALが気に入ったら「いいね」してね！

関連する記事