.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(12, 50px);
  gap: 12px;
  padding: 20px;
}

.gchild {
  background-color: green;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
}

/* Grid Layout */

.item1 { grid-column: 1; grid-row: 1 / span 12; }

.item2 { grid-column: 2; grid-row: 1 / span 6; }
.item3 { grid-column: 2; grid-row: 7 / span 6; }

.item4 { grid-column: 3; grid-row: 1 / span 4; }
.item5 { grid-column: 3; grid-row: 5 / span 4; }
.item6 { grid-column: 3; grid-row: 9 / span 4; }

.item7 { grid-column: 4; grid-row: 1 / span 3; }
.item8 { grid-column: 4; grid-row: 4 / span 3; }
.item9 { grid-column: 4; grid-row: 7 / span 3; }
.item10 { grid-column: 4; grid-row: 10 / span 3; }

.item11 { grid-column: 5; grid-row: 1 / span 2; }
.item12 { grid-column: 5; grid-row: 3 / span 2; }
.item13 { grid-column: 5; grid-row: 5 / span 2; }
.item14 { grid-column: 5; grid-row: 7 / span 2; }
.item15 { grid-column: 5; grid-row: 9 / span 2; }
.item16 { grid-column: 5; grid-row: 11 / span 2; }

.item17 { grid-column: 6; grid-row: 1; }
.item18 { grid-column: 6; grid-row: 2; }
.item19 { grid-column: 6; grid-row: 3; }
.item20 { grid-column: 6; grid-row: 4; }
.item21 { grid-column: 6; grid-row: 5; }
.item22 { grid-column: 6; grid-row: 6; }
.item23 { grid-column: 6; grid-row: 7; }
.item24 { grid-column: 6; grid-row: 8; }
.item25 { grid-column: 6; grid-row: 9; }
.item26 { grid-column: 6; grid-row: 10; }
.item27 { grid-column: 6; grid-row: 11; }
.item28 { grid-column: 6; grid-row: 12; }