BLOG

リストの縦並びで2列にする

| HTML/CSS/PHP

2列にするときって普通にすると
flexとかflowとか使って、2列にするんですが
それだと
- list01 - list02
- list03 - list04
- list05

って感じに横になるんですがね。
そうじゃなくて今回は

- list01 - list04
- list02 - list05
- list03

こういう感じにしたいのです。
ってことで簡単に、

/// HTML
<ul>
  <li>list 01</li>
  <li>list 02</li>
  <li>list 03</li>
  <li>list 04</li>
  <li>list 05</li>
</ul>

HTMLはこんな感じ

ul{
  column-count: 2;
}

cssはこんな感じです。
でもね、これだと左3右2とかで数があってないと
左右が縦センターに揃っちゃうんですよね。
面がずれるんです。

li{
  display: inline-block;
}

なので中のに上記を追加したら面そろいます。
ってなわけでいちいち枠で囲って並べたりしなくてもよくなりました。
すごくありがたいですね!

あと、カラム間の距離は

ul{
  column-count: 2;
  column-gap: 10px;
}

って感じで、「column-gap」でできます。
以前記事を書いたのですが、こっちのがわかりやすくかけたと思うのでこっち残しにします。

一応、flexとか使ってもできますが、それだと高さを指定しないとだめなので、
中身(数)が増えたり、2行になったりとかね、そういうので使えないので
上記が一番フレキシブルにつかえると思います。
※ JSとか使ったらいけるんだろうけど面倒なのでしないです

PAGE TOP