display: grid を使い慣れておらず、毎回検索してしまっているので備忘録としてまとめ。
タイトル通り、display: grid を指定した時に横方向に並べる子要素の数を指定する方法についてです。
参考にさせていただいた記事はこちらから。
一番分かりやすいCSS Grid Layoutの使い方ガイド | Web Design Trends
https://webdesign-trends.net/entry/11086#i-7
記事タイトルが「一番分かりやすいCSS Grid Layoutの使い方ガイド」というだけあって、とても分かりやすかったです！
さて指定方法ですが、grid-template-columns プロパティと repeat() を使います。
サンプルコードは下記のとおりです。
#container {
display: grid;
grid-template-columns: repeat(5, 1fr);
親コンポーネントに上記を指定することで、横方向に子要素が 5つ並ぶグリッド表示を実装することができます。
なお、第二引数に 1fr を指定することで、子要素の横幅を画面サイズに合わせた幅に自動調整することができます。
もし、子要素の横幅を固定したい場合は、100px などの数値で指定することもできます。
ちなみに、横方向に並べたい数以上に子要素がある場合は自動で改行されます。
たったこれだけなのですが…毎回 grid-template-columns と repeat() の使い方を忘れるのでまとめました。
以上、CSS の display: grid で、横方向に並べる子要素の数を指定する方法についてでした。
ご参考になれば幸いです。
