<div class="grid-container" style="width: 415px; height: 415px;">
  <div class="grid-item1" style="background-color: #F9344C; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム1</div>
  <div class="grid-item2" style="background-color: #FC4E32; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム2</div>
  <div class="grid-item3" style="background-color: #FF9914; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム3</div>
  <div class="grid-item4" style="background-color: #FFF231; color: #000; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム4</div>
  <div class="grid-item5" style="background-color: #99D02B; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム5</div>
  <div class="grid-item6" style="background-color: #33A65E; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム6</div>
  <div class="grid-item7" style="background-color: #1AA18E; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム7</div>
  <div class="grid-item8" style="background-color: #1D86AE; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム8</div>
  <div class="grid-item9" style="background-color: #386CB0; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム9</div>
  <div class="grid-item10" style="background-color: #6964AD; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム10</div>
  <div class="grid-item11" style="background-color: #A45AAA; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム11</div>
  <div class="grid-item12" style="background-color: #DF4C94; color: #fff; font-weight: bold; padding: 25px 10px 0 10px;">グリッド<br>アイテム12</div>
</div>