Получаеться расположить div'ы по сетке, но не работает если поменять их на img CSS Grid

Question

Как правильно будет сделать в случае, если нужно вставить изображения вместо цветного блока?

.blog__slider-content-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 12px;
  outline: purple 1px solid;
  width: 407px;
  height: 267px;
}

.blog__slider-content-image-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  background: tomato;
}

.blog__slider-content-image-2 {
  background: royalblue;
}

.blog__slider-content-image-3 {
  background: royalblue;
}

<div class="blog__slider-content">
  <div class="blog__slider-content-images">
    <div class="blog__slider-content-image-1"></div>
    <div class="blog__slider-content-image-2"></div>
    <div class="blog__slider-content-image-3"></div>
  </div>
</div>

Если я меняю div на img то не работает.

Как корректно делать в данном случае?

Answer 1

Свойства, которые я добавил что бы это заработало:

img {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

Рабочий пример:

img {
  display: block;
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.blog__slider-content-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 12px;
  width: 407px;
  height: 267px;
  outline: purple 1px solid;
}

.blog__slider-content-image-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

<div class="blog__slider-content">
  <div class="blog__slider-content-images">
    <img class="blog__slider-content-image-1" src="https://picsum.photos/400"/>
    <img class="blog__slider-content-image-2" src="https://picsum.photos/400"/>
    <img class="blog__slider-content-image-3" src="https://picsum.photos/400"/>
  </div>
</div>

Вам нужно будет только отрегулировать размеры картинок под "ячейки" (grid'ы), либо "ячейки" под размеры картинок (как это сейчас).

БЛОГ НА HUSL

Получаеться расположить div'ы по сетке, но не работает если поменять их на img CSS Grid

Ответы (1 шт):