今回はリストを横並び、および縦並びに複数列に並べる方法を解説します。
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
で行い、数値を2から3に変更するだけで3列にすることが可能です。
また、auto
を1fr
にすることで、項目の幅を均等に保つことができます。
width:fit-content
は、リスト項目の幅に合わせて余白を詰めるための指定となり、削除すれば親要素の幅いっぱいに広がります。
縦並び2列も可能だが万能ではない
grid-auto-flow:column
で縦並びにし、grid-template-rows
で数を指定すれば、縦並びにすることも可能です。
ただし、子要素の数に合わせて縦何行にするかを調整しないといけないので、実質リストの数が増減しない場合でしか使えないということになります。
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
の値で行います。
こちらも同じくwidth:fit-content
は、リスト項目の幅に合わせて余白を詰めるための指定となります。
ただし、以下のような注意点もあります。
項目の幅は均等になる
column-count
の幅は均等配置なので、文字が多い項目が1つでもあると、全ての項目の幅が同じ幅になります。
gridで言う1frのような感じ。
各項目の文字に合わせて余白を詰めたい場合は、別のアプローチが必要となります。
flexではダメなのか
display:flex
は横並びさせるメジャーな方法ですが、幅や高さに依存しているので、子要素を詰めながら偶数で折り返すなどの指定が難しいです。
もしかしたら何かしらの組み合わせで、子要素の幅に合わせて任意の箇所で折り返しが可能かもしれませんが、それならgridを使ったほうがシンプルかなと。
幅や高さが決まっていたり、子要素の幅に合わせないと言うのであれば、flexもありかもしれません。
まとめ:まだ完璧な実装方法はない
今回色々とご紹介しましたが、縦並び2列にする最適な方法はまだありませんでした。
増減のしない場所であれば気軽に実装できるので、フッターや項目が多いメニューなどで使ってみてはいかがでしょうか。
左右に分けるためにわざわざdiv囲まずに、HTMLが簡素化され理想的な構造になったのは大きなメリットです。
もし、もっと最適な実装方法があれば追記します。
カスタマイズを自分でしてみませんか?
「機能を追加したい」「もう少しデザインを調整したい」と思ったらWeb制作のスクール「デイトラ」がおすすめです。
どのコースも10万円前後と他のスクールに比べても格安で、副業や転職に十分なスキルが身に付きます。
気になった方は、是非アクセスしてみてください。
コースの一部
ご質問などお気軽にコメントどうぞ