<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
  <div class="item item11">11</div>
  <div class="item item12">12</div>
  <div class="item item13">13</div>
  <div class="item item14">14</div>
  <div class="item item15">15</div>
  <div class="item item16">16</div>
  <div class="item item17">17</div>
  <div class="item item18">18</div>
  <div class="item item19">19</div>
  <div class="item item20">20</div>
  <div class="item item21">21</div>
  <div class="item item22">22</div>
  <div class="item item23">23</div>
  <div class="item item24">24</div>
  <div class="item item25">25</div>
  <div class="item item26">26</div>
  <div class="item item27">27</div>
  <div class="item item28">28</div>
  <div class="item item29">29</div>
  <div class="item item30">30</div>
</div>
:root {
  --yellow: #ffc600;
}

.container {
  display: grid;
  grid-gap: 20px;
  /* Make the grid 10 columns wide, every other taking up twice the free space */
  grid-template-columns: repeat(5, 1fr 2fr);
  /* Make the grid have 10 explicit rows, 50px high each */
  grid-template-rows: repeat(10, 50px);
}

.item {
  display: grid;
  justify-content: center;
  align-items: center;
  border: 5px solid rgba(0, 0, 0, 0.03);
  border-radius: 3px;
  font-size: 35px;
  background-color: var(--yellow);
}

.item p {
  margin: 0 0 5px 0;
}

/* With Item 1, start at col 3 and go until 5 */
.item1 {
  grid-column: 3 / 5;
}

/* With Item 2, start at col 5 and go until the end */
.item2 {
  grid-column: 5 / -1;
}
/* Make Item 5 double span 2 cols and rows */
.item5 {
  grid-column: span 2;
  grid-row: span 2;
}

/* Make Item 8 two rows high */
.item8 {
  grid-row: span 2;
}

/* Make Item 15 span the entire grid width */
.item15 {
  grid-column: 1 / -1;
}

/* Make item 18 span 4 widths, but end 9 */
.item18 {
  grid-column: span 4 / 9;
}

/* Make item 20 start at row 4 and go for 3 */
.item20 {
  grid-column: 4 / span 3;
}

.item1,
.item2,
.item5,
.item8,
.item15,
.item18,
.item20 {
  background: #BADA22;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.