/* HTML structure:
<div class="grid-layout">
  <div class="item item-1">Item 1 (Spans 2 columns)</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3 (Starts at col 3, spans 2 rows)</div>
  <div class="item item-4">Item 4</div>
  <div class="item item-5">Item 5</div>
</div>
*/

.grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
  grid-template-rows: auto auto auto; /* Auto rows */
  gap: 15px; /* Gutter */
  padding: 20px;
  background-color: #f0f8ff;
}

.item {
  background-color: #afeeee;
  border: 1px solid #4682b4;
  padding: 15px;
  text-align: center;
}

.item-1 {
  grid-column: 1 / span 2; /* Starts at column line 1, spans 2 columns */
  /* Equivalent to grid-column-start: 1; grid-column-end: span 2; */
}

.item-2 {
  /* Automatically placed in the next available cell */
  grid-column: 3; /* Placed specifically in column 3 */
}

.item-3 {
  grid-column: 3 / span 2; /* Starts at column line 3, spans 2 columns */
  grid-row: 2 / span 2; /* Starts at row line 2, spans 2 rows */
}

.item-4 {
  /* Automatically placed */
}

.item-5 {
  grid-column: 1; /* Explicitly place in column 1 */
}