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

2023年10月26日2024年10月26日

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

HTMLの構造

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

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

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

grid-template-columnsで列の指定を行い、autoを２回繰り返すという指定にしてます。

ただ、このままだとリストが親の幅いっぱいまで広がってしまうためwidth:fit-contentで最小限の幅になるよう調整しています。

grid-auto-flow:columnを指定すれば縦並びも可能です。

/* 縦並び２列 */
.list {
  display: grid;
  width: fit-content;
  column-gap: 2em;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
}

ただし、列数の指定はできないため、リストの数に応じてgrid-template-rowsで行数を調整しなければいけません。

リストの数が6個ある場合は、半分の3を行数にすることで、2列となります。

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

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

一見良さそうですが、文字が多い項目があると、他の項目も同じ幅になってしまいます。

余分な余白を持たせたくない場合には使えません。

display:flexは横並びさせるメジャーな方法ですが、幅や高さに依存しているので列数や行数を指定することはできません。

もしかしたら何かしらの組み合わせで、自由に折り返しが可能かもしれませんが、それならGrid Layoutを使ったほうが直感的です。

リストをdivで囲って左右に分ける場合には、Flexboxは使いやすいと思います。

今回色々とご紹介しましたが、縦並び２列に関しては最適解がまだありませんでした。

ただ、リストの数が増減のしない場所であれば気軽に実装できるので、フッターや固定メニューなどで使ってみてはいかがでしょうか。

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

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