<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);
});