【CSS】リストを横並び・縦並びで複数列に並べる方法

今回はリストを横並び、および縦並びに複数列に並べる方法を解説します。

WordPressテーマ『SWELL』

17,600円（税込）

当ブログで使用中のSWELL。優れたデザインとプロ仕様の機能で、ブログが一段とパワーアップ。投資価値No.1のテーマです。

公式サイトへ購入はこちら

HTMLの構造

基本的なHTMLの構造は以下のようになっています。

<ol class="list">
  <li>リンゴ</li>
  <li>バナナ</li>
  <li>オレンジ</li>
  <li>いちご</li>
  <li>ぶどう</li>
  <li>キウイ</li>
</ol>

gridで横並び２列

See the Pen list-column_grid by hisa (@hisaaashi) on CodePen.

.list {
  display: grid;
  width: fit-content;
  column-gap: 2em;
  grid-template-columns: repeat(2, auto);
}

列の指定はgrid-template-columnsで行い、数値を2から3に変更するだけで3列にすることが可能です。
また、autoを1frにすることで、項目の幅を均等に保つことができます。

width:fit-contentは、リスト項目の幅に合わせて余白を詰めるための指定となり、削除すれば親要素の幅いっぱいに広がります。

縦並び2列も可能だが万能ではない

grid-auto-flow:columnで縦並びにし、grid-template-rowsで数を指定すれば、縦並びにすることも可能です。

ただし、子要素の数に合わせて縦何行にするかを調整しないといけないので、実質リストの数が増減しない場合でしか使えないということになります。

column-countで縦並び２列

See the Pen list-column_column-count by hisa (@hisaaashi) on CodePen.

.list {
  column-count: 2;
  width: fit-content;
  column-gap: 2em;
}

列数の指定はcolumn-countの値で行います。

こちらも同じくwidth:fit-contentは、リスト項目の幅に合わせて余白を詰めるための指定となります。

ただし、以下のような注意点もあります。

項目の幅は均等になる

column-countの幅は均等配置なので、文字が多い項目が１つでもあると、全ての項目の幅が同じ幅になります。

gridで言う1frのような感じ。

各項目の文字に合わせて余白を詰めたい場合は、別のアプローチが必要となります。

flexではダメなのか

display:flexは横並びさせるメジャーな方法ですが、幅や高さに依存しているので、子要素を詰めながら偶数で折り返すなどの指定が難しいです。

もしかしたら何かしらの組み合わせで、子要素の幅に合わせて任意の箇所で折り返しが可能かもしれませんが、それならgridを使ったほうがシンプルかなと。

幅や高さが決まっていたり、子要素の幅に合わせないと言うのであれば、flexもありかもしれません。

まとめ：まだ完璧な実装方法はない

今回色々とご紹介しましたが、縦並び２列にする最適な方法はまだありませんでした。

増減のしない場所であれば気軽に実装できるので、フッターや項目が多いメニューなどで使ってみてはいかがでしょうか。

左右に分けるためにわざわざdiv囲まずに、HTMLが簡素化され理想的な構造になったのは大きなメリットです。

もし、もっと最適な実装方法があれば追記します。

おすすめWEBスクール

WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。

＼ ここから飛べます！ ／