縦並びで複数列のリストを作成する

リストを縦方向に並べて、一定位置で折り返して次の列に並べるという実装をしたいことがあったので、実装方法を考えてみました。

サンプルコード

以下のようなリストで試してみます。

<ul class="sample">
  <li><a href="">メニューA</a></li>
  <li><a href="">メニューB</a></li>
  〜略〜
  <li><a href="">メニューL</a></li>
</ul>

まずはdisplay: flex;を使用する方法です。

.sample {
  display: flex;
  flex-direction: column; /* 縦並びに変更 */
  flex-wrap: wrap; /* 次の列に改行 */
  height: 120px;
}

flex-direction: column;で縦並びにした上でheightを設定して、高さ一杯まで来たら次の列に改行されるようにflex-wrap: wrap;を設定しています。
display: flexのデモページ
注意点として、リスト全体に幅の設定がないと横幅いっぱいに広がります。

display: flex; ではなく display: inline-flex;にすることで、横幅いっぱいに広がらなくなります。

.sample {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
}

display: inline-flexのデモページ

次にdisplay: grid;を使用する方法です。

.sample {
  display: grid;
  grid-auto-columns: max-content;
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: column;
}

grid-auto-flow: column;で縦並びにしてgrid-template-rows: repeat(5, 1fr);で行の数(今回は5行)を設定、横幅いっぱいに広がらないようにgrid-auto-columns: max-content;を設定しています。
display: gridのデモページ

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年10月
 1
2345678
9101112131415
16171819202122
23242526272829
3031