縦幅を揃えて一行に複数列を並べる

モバイルサイトのコーディングをしてる中で、display: table を使った一行に複数の列が並ぶリストを作った。縦幅が揃ってること、セパレーションボーダーの高さの調節が簡単にできるのが良いとこで、コンテンツが増減する可能性が少ない場所なんかで使えると思う。

縦幅を揃えて一行に複数列並べる | JSFiddle :

.group {
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
}

.group li {
  position: relative;
  display: table-cell;
  padding: 8px;
  background-color: whiteSmoke;
}

.group li::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 0;
  width: 1px;
  height: 50%;
  background-color: gray;
}

そして、いきなりなんだけどこれの弱点は、グループ内にコンテンツを容易に増やせないことにあると思う。狭いウィンドウの中で列を増やすとコンテンツ一つ一つの幅が狭くなり、一行に収まる文字数が極端に少なくなったり、画像なら小さくなりすぎてしまう。その上ウィンドウサイズの変化に合わせてカラムを上げたり落とすことができない... 。

また、固定のウィンドウサイズの中で使うとしても、複数行にまたがるリストを ul や ol で表すことができない。二列数行、三列数行にまたがるコンテンツを並べたいときは、以下のように行を括ってあげないと全て一行の中にコンテンツが並ぶことになる。

<div class="group">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

使いどころは少ない気がするけど、サイトのアピールポイント（ 2つとか 3つなら）を並べるときとかには良い、かも。