浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【CSS】display: gridを指定した時に横方向に並べる子要素の数を指定する

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-columnsrepeat() の使い方を忘れるのでまとめました。

 

以上、CSS の display: grid で、横方向に並べる子要素の数を指定する方法についてでした。
ご参考になれば幸いです。

  • この記事いいね! (0)