Первый элемент занимает всю строчку

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

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

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

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

Результат:

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

.item:first-child {
  grid-column-start: 1;
  grid-column-end: 4;
}

/* Или сокращённый вариент */
.item:first-child {
  grid-column: 1 / 4;
}

Результат: