WordPressテーマでの最速のギャラリー実装

WordPress の機能であるギャラリーを対応しないといけなかったのですが、1カラムから9カラムまであって対応するのが一見めんどくさそうでした。
でもクラス名はただ連番になっているだけだったので Flexbox と SASS の For 文使えばかなり楽そうだと思ったのでそれで実装しました。

@for $i from 1 through 9 {
  .gallery-columns-#{$i} {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;

    .gallery-item {
      width: calc(100% / #{$i});
      padding: 0 .1rem;
    }
  }
}

コンパイル後の CSS はこうなります :

.gallery-columns-1 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-1 .gallery-item {
  width: calc(100% / 1);
  padding: 0 .1rem;
}

.gallery-columns-2 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-2 .gallery-item {
  width: calc(100% / 2);
  padding: 0 .1rem;
}

.gallery-columns-3 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-3 .gallery-item {
  width: calc(100% / 3);
  padding: 0 .1rem;
}

.gallery-columns-4 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-4 .gallery-item {
  width: calc(100% / 4);
  padding: 0 .1rem;
}

.gallery-columns-5 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-5 .gallery-item {
  width: calc(100% / 5);
  padding: 0 .1rem;
}

.gallery-columns-6 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-6 .gallery-item {
  width: calc(100% / 6);
  padding: 0 .1rem;
}

.gallery-columns-7 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-7 .gallery-item {
  width: calc(100% / 7);
  padding: 0 .1rem;
}

.gallery-columns-8 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-8 .gallery-item {
  width: calc(100% / 8);
  padding: 0 .1rem;
}

.gallery-columns-9 {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.gallery-columns-9 .gallery-item {
  width: calc(100% / 9);
  padding: 0 .1rem;
}

あとはキャプション部分の CSS をちょいと整えてあげればもうお終いです。
参考までにですが、私の開発したテーマ Coldbox では以下のような実装になっています。

.gallery-icon.landscape {
  text-align: center;
}
.gallery-caption {
  max-width: 100%;
  padding: 5px 5px 0;
  font-style: italic;
  font-size: .94em;
  line-height: 1.4;
  text-align: center;
}

ちなみにテーマを公式ディレクトリにアップロードする際には、デフォルト設定である3カラムへの対応のみが必須とのことです。
ただ Flexbox と SASS、calc さえあればなんも面倒くさい部分はなかったのでギャラリー対応するなら3カラムだけへの対応と、1から9まで全部の対応もそんなに変わらないよ、という紹介でした。