<main>
  <div class="contents">
    <div class="title">Without empty cells</div>
    <div class="grids">
      <div class="grid-title">
        justify-content: flex-start;
      </div>
      <li class="grid is-left">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
      </li>
      <div class="grid-title">
        justify-content: center;
      </div>
      <li class="grid is-center">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
      </li>
      <li class="grid is-center is-wide">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
        <ul class="cell madomagi">なぎさ</ul>
      </li>
      <li class="grid is-center is-narrow">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
        <ul class="cell madomagi">なぎさ</ul>
      </li>
      <div class="grid-title">
        justify-content: space-between;
      </div>
      <li class="grid is-space-between">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
      </li>
      <div class="grid-title">
        justify-content: space-around;
      </div>
      <li class="grid is-space-around">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
      </li>
    </div>
  </div>
  <div class="contents">
    <div class="title">With empty cells</div>
    <div class="grids">
      <div class="grid-title">
        justify-content: flex-start;
      </div>
      <li class="grid is-left">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
      </li>
      <div class="grid-title">
        justify-content: center;
      </div>
      <li class="grid is-center with-empty-cells">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
      </li>
      <li class="grid is-center is-wide with-empty-cells">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
        <ul class="cell madomagi">なぎさ</ul>
      </li>
      <li class="grid is-center is-narrow with-empty-cells">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
        <ul class="cell madomagi">なぎさ</ul>
      </li>
      <div class="grid-title">
        justify-content: space-between;
      </div>
      <li class="grid is-space-between with-empty-cells">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
      </li>
      <div class="grid-title">
        justify-content: space-around;
      </div>
      <li class="grid is-space-around with-empty-cells">
        <ul class="cell hidamari">ゆの</ul>
        <ul class="cell hidamari">宮子</ul>
        <ul class="cell hidamari">沙英</ul>
        <ul class="cell hidamari">ヒロ</ul>
        <ul class="cell hidamari">乃莉</ul>
        <ul class="cell hidamari">なずな</ul>
        <ul class="cell hidamari">茉里</ul>
        <ul class="cell madomagi">まどか</ul>
        <ul class="cell madomagi">さやか</ul>
        <ul class="cell madomagi">マミ</ul>
        <ul class="cell madomagi">杏子</ul>
        <ul class="cell madomagi">ほむら</ul>
      </li>
    </div>
  </div>
</main>
html {
  /* 1.0rem is about 10px when font-size: 62.5% */
  font-size: 62.5%;
}

body {
  font-size: 1.2rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-flow: row;
}

.contents {
  justify-content: center;
}

.title {
  padding: 2rem;
  font-size: 3.2rem;
}

.grids {
  padding: 2rem;
}

.grid-title {
  font-size: 1.6rem;
}

.grid {
  list-style-type: none;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: 50rem;
  background-color: #e6e6e6;
  box-shadow: 0 0.3rem 0 #c6c6c6;
  border-radius: 0.3rem;
  display: flex;
  flex-flow: row wrap;
}

.cell {
  width: 6.4rem;
  height: 3.2rem;
  margin: 1rem;
  padding: 1rem;
  text-align: center;
  vertical-align: middle;
  border-radius: 0.6rem;
}

.cell.hidamari {
  color: #845600;
  background-color: #ffc65d;
  box-shadow: 0 0.3rem 0 #ffb42a;
}

.cell.madomagi {
  color: #84002f;
  background-color: #ff5d96;
  box-shadow: 0 0.3rem 0 #ff2a75;
}

.cell.is-empty {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.cell:hover {
  cursor: pointer;
  margin-top: 1.3rem;
  margin-bottom: 0.7rem;
  box-shadow: none;
}

.grid.is-left {
  justify-content: flex-start;
}

.grid.is-center {
  justify-content: center;
}

.grid.is-space-between {
  justify-content: space-between;
}

.grid.is-space-around {
  justify-content: space-around;
}

.grid.is-wide {
  width: 68rem;
}

.grid.is-narrow {
  width: 18rem;
}
var emptyCells, i;

$('.grid.with-empty-cells').each(function() {
  emptyCells = [];
  for (i = 0; i < $(this).find('.cell').length; i++) {
    emptyCells.push($('<ul>', {
      class: 'cell is-empty'
    }));
  }
  $(this).append(emptyCells);
});

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js