【CSS】リストを横並び・縦並びで複数列に並べる方法
今回はリストを横並び、および縦並びに複数列に並べる方法を解説します。
HTMLの構造
基本的なHTMLの構造は以下のようになっています。
<ol class="list">
<li>リンゴ</li>
<li>バナナ</li>
<li>オレンジ</li>
<li>いちご</li>
<li>ぶどう</li>
<li>キウイ</li>
</ol>
gridで横並び2列
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
で列の指定を行い、autoを2回繰り返すという指定にしてます。
- 2列の例:
repeat(2, auto)
- 3列の例:
repeat(3, auto)
ただ、このままだとリストが親の幅いっぱいまで広がってしまうためwidth:fit-content
で最小限の幅になるよう調整しています。
縦並びは要調整
grid-auto-flow:column
を指定すれば縦並びも可能です。
/* 縦並び2列 */
.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列となります。
column-countで縦並び2列
See the Pen list-column_column-count by hisa (@hisaaashi) on CodePen.
.list {
column-count: 2;
width: fit-content;
column-gap: 2em;
}
列数の指定はcolumn-count
の値で行います。
一見良さそうですが、文字が多い項目があると、他の項目も同じ幅になってしまいます。
余分な余白を持たせたくない場合には使えません。
Flexboxではダメなのか
display:flex
は横並びさせるメジャーな方法ですが、幅や高さに依存しているので列数や行数を指定することはできません。
もしかしたら何かしらの組み合わせで、自由に折り返しが可能かもしれませんが、それならGrid Layoutを使ったほうが直感的です。
リストをdiv
で囲って左右に分ける場合には、Flexboxは使いやすいと思います。
まとめ:まだ完璧な実装方法はない
今回色々とご紹介しましたが、縦並び2列に関しては最適解がまだありませんでした。
ただ、リストの数が増減のしない場所であれば気軽に実装できるので、フッターや固定メニューなどで使ってみてはいかがでしょうか。
左右に分けるためにわざわざdiv囲まずに、HTMLが簡素化され理想的な構造になったのは大きなメリットです。
もし、もっと最適な実装方法があれば追記します。
おすすめWEBスクール
WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ!
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。
\ クリックしてジャンプ! /
お気軽にコメントどうぞ