CodePen Embed - grid-6

<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>

.grid-container{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 5px;
}
.grid-item1{
  grid-column: 1;
  grid-row: 2;
}
.grid-item2{
  grid-column: 1;
  grid-row: 1;
}
.grid-item3{
  grid-column: 2;
  grid-row: 1;
}
.grid-item4{
  grid-column: 3;
  grid-row: 1;
}
.grid-item5{
  grid-column: 4;
  grid-row: 1;
}
.grid-item6{
  grid-column: 4;
  grid-row: 2;
}
.grid-item7{
  grid-column: 4;
  grid-row: 3;
}
.grid-item8{
  grid-column: 4;
  grid-row: 4;
}
.grid-item9{
  grid-column: 3;
  grid-row: 4;
}
.grid-item10{
  grid-column: 2;
  grid-row: 4;
}
.grid-item11{
  grid-column: 1;
  grid-row: 4;
}
.grid-item12{
  grid-column: 1;
  grid-row: 3;
}

This Pen is owned by SHIITAKE on CodePen.

See more by @SHIITAKE365 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.