Растянуть элемент на несколько колонок или строк

Допустим есть вывод элементов:

<div class="items">
  <div class="item">Элемент 1</div>
  <div class="item">Элемент 2</div>
  <div class="item">Элемент 3</div>
  <div class="item">Элемент 4</div>
  <div class="item">Элемент 5</div>
  <div class="item">Элемент 6</div>
</div>

Выводятся они через didplay: grid.

.items {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(3, 1fr);
}

Результат:

Элемент занимает несколько элементов в ширину

Надо сделать, чтобы первый элемент был на всю ширину. Для этого можно использовать свойства grid-column. 

.item:first-child {
  grid-column: span 3;
}

Параметр span означает, что надо растянуть элемент на указанное количество колонок.

Результат:

Элемент занимает несколько элементов в высоту

Надо сделать, чтобы третий элемент занимал две строчки. Для этого можно использовать свойства grid-row. 

.item:first-child {
  grid-row: span 2;
}

Результат: