BenderIsGreat34
@BenderIsGreat34
junior front-end

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

.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>

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

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

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы