BLOG

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

| HTML / CSS

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とか使ったらいけるんだろうけど面倒なのでしないです

RECENT POSTS

我が家の植物たち

カスタムフィールドを含む複数の条件でソートをする【WordPress】

脱jQuery!$.ajax使わない書き方

検索用のフォームを設置する【wordpress】

docker-composeをつかってWEBサーバーをたてる

カスタムフィールドを検索範囲にいれる【ACF】

WordPressに大量に投稿をインポートする【CSV】

iOSのsafariでbackground-attachmentが使えないので対策【CSSのみ】

一周回ってapple 純正メモって使いやすい

使わないとかない!flexでの間隔の設定が簡単にできるgap!

CATEGORY

POPULAR POSTS

PAGE TOP