UPDATE:2024.3.8
- CATEGORY
グリッドレイアウト(CSS Grid)で謎の余白が発生した時に設定するプロパティ
Contents
![](https://apricot-design.com/wp2023/wp-content/uploads/2024/03/cssgrid.jpg)
今回のブログはその時の原因と対応についての備忘録です。
謎の余白が発生
![グリッドレイアウトのgrid-template-rowsの設定を説明する画像① grid-template-rowsを設定しない場合に予期せぬ余白が発生することがある](https://apricot-design.com/wp2023/wp-content/uploads/2024/03/griditem1.jpg)
記のようにグリッドレイアウトの表の下にボタンを配置した時、なぜか大きな余白が発生して「なぜ?」となりました。
理由を調べると、「grid-template-rows」というプロパティの設定をしていなかったことが原因でした。
grid-template-rowsとは
横行の高さを指定するプロパティです。初期値は「none」です。
![グリッドレイアウトのgrid-template-rowsの設定を説明する画像② grid-template-rowsを設定しない場合にすべてのグリッドアイテムの高さは自動で同じになる](https://apricot-design.com/wp2023/wp-content/uploads/2024/03/griditem2.jpg)
![グリッドレイアウトのgrid-template-rowsの設定を説明する画像③ grid-template-rows: auto;にすると他のアイテムに高さを合わせることが無くなるので、予期せぬ余白も無くなる](https://apricot-design.com/wp2023/wp-content/uploads/2024/03/griditem3.jpg)
最後に
グリッドレイアウトはプロパティが多く、考えた通りのレイアウトにするのが難しいこともあります。とりあえず私のようにflexのような感覚で使っていると上記のような事態に陥りやすい気がするので、備忘録として記録しておきます。