[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート

下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。

もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。

Tetris & The Power Of CSS

基本となるHTMLは、リストでアイテムを配置します。

HTML

アイテム数は、適当に変更して構いません。

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
  <li class="flex-item">8</li>
</ul>

ぴったり収めるには、最後のアイテムをどのように処理するかがポイントになります。
最後のアイテムが幅いっぱいに表示されるようにスタイルを定義してみます。

CSS

.grid li:last-child {
   float: none;
   width: auto;
}

これだけでは、期待通りに配置されません。

残念な結果に

実装のポイント

単に「last-child」を使っただけではうまくいかないので、以下の点に留意しスタイルします。

• グリッドは3カラム。
• アイテムの数は不明。
• 幅を調整するアイテムは、必ず最後。
• 最後のアイテムは、カラムいっぱいの幅に。

完成形のスタイル

CSS

完成形のスタイルです。

* {
  box-sizing: border-box;
}

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 600px;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
}

.flex-item {
  background: #ececec;
  border:1px solid #adadad;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;

  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
  flex: 1 calc(100% / 3);
}
.flex-item:nth-child(3n+2):last-child {
  flex-basis: calc((100% / 3) * 2);
}

実際の動作は下記ページで確認できます。

デモ