Как оставить пустую ячейку в grid-контейнере?

Question

[Иван]

.works__examples {
  max-width: 67%;
  height: 440px;
  padding: 0 15px;
}

.works__grid {
  display: grid;
  grid-template-columns: 500px 250px 250px;
  grid-template-rows: 250px 190px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

<div class="works__examples">
          <div class="works__grid">
            <a href=""><img src="img/800x400/01.jpg" width="499px" alt="examples"></a>
            <a href=""><img src="img/397x400/01.jpg" width="248px" alt="examples"></a>
            <a href=""><img src="img/397x300/03.jpg" width="248px" alt="examples"></a>
            <a href=""><img src="img/397x300/02.jpg" width="248px"alt="examples"></a>
            <a href=""><img src="img/397x300/01.jpg" width="248px"alt="examples"></a>
          </div>
        </div>

у меня получилось так

а должны быть так

Answer 1

[Рома Зварич]

Не очень понял, для чего именно Вам нужно оставлять пустую ячейку.
Но чтобы первый элемент занял две колонки как на макете, достаточно задать для него "grid-column: span 2;"
Остальные элементы сами занимают следующие ячейки

Пример:
https://codepen.io/hisbvdis/pen/NQaGvv

Comments

[Иван]

Рома Зварич странно, но в моём случае ничего не меняется...

[Рома Зварич]

BenderIsGreat34, это потому что я немного изменил верстку, добавил пару классов. Ну и я изначально опечатку допустил, а Вы её скопировали до того, как я исправил.

Если делать в рамках Вашей верстки, то нужно добавить

.works__grid a:first-child {
  grid-column: span 2;
}

Результат:
https://codepen.io/hisbvdis/pen/aeLvxo?editors=1100