【CSS】縦並びの折り返し配置

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

よくある縦並び折り返し配置のレイアウト。

Gridパターン

コードは以下になります。

  <ul class="list">
    <li class="list__item">
      <a href="">メニューA</a>
    </li>
    <li class="list__item">
      <a href="">メニューB</a>
    </li>
    <li class="list__item">
      <a href="">メニューC</a>
    </li>
    <li class="list__item">
      <a href="">メニューD</a>
    </li>
    <li class="list__item">
      <a href="">メニューE</a>
    </li>
  </ul>
.list {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);
  row-gap: 8px;
  padding: 20px;
  background-color: skyblue;
  color: #fff;
}

grid-auto-flowプロパティは、グリッドアイテムがどのように配置するか指定できます。今回の場合、columnを指定しているので、縦方向に配置されます。

grid-template-rows: repeat(3, auto); の記述で、縦に3つ以上並ぶと、それ以降は折り返します。

flexパターン

コードは以下になります。（HTMLは同じなので省略）

.list {
  display: flex;
  flex-flow: column wrap;
  max-height: 130px;

  padding: 20px;
  background-color: skyblue;
  color: #fff;
}

高さのmax値を決めて、flex-flow: column wrap;で縦並びと折り返しをしています。

flex-flowは、flex-directionとflex-wrapの一括指定の書き方です。

column-countパターン

コードは以下になります。

.list {
  column-count: 2;

  padding: 20px;
  background-color: skyblue;
  color: #fff;
}

column-count: 2;で列の数を指定できます。

個人的にはGridパターンが一番使いやすいかなと思います。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧