CSS-сетка для элементов img работает хорошо, но ломается, когда imgs получает div-обертки

Question

Это мой первый опыт работы с CSS Grid. Я использовал его для создания адаптивной сетки изображений, которая действительно хорошо работает на игрушечном примере. Однако, когда я пытаюсь использовать код в моем реальном проекте, все ломается очень странными способами. Первый шаг, который ломает это, добавляет div-обертки к изображениям. (Я использую обертки, чтобы обеспечить заполнитель для изображений и для некоторого дополнительного стиля).

JSfiddle для CSS-сетки, которая работает с imgs

<div class="grid">
  <img class="item" src="https://via.placeholder.com/200" />
  <img ...

JSfiddle для сетки CSS, которая не работает после добавления оболочек div

<div class="grid">
  <div class="item"><img src="https://via.placeholder.com/200" /></div>
  <div ...

Я знаю, что обёртка не делает ничего полезного в примере с игрушкой. Это дурацкая версия моего настоящего проекта, где обертка полезна. Могу ли я исправить CSS-сетку, чтобы она работала с обертками?

Answer 1

Вы должны указать свои изображения следующим CSS:

.grid img {
  display: block;
  width: 100%;
  height: auto;
}

• В вашем первом примере .item = your images
  Там они получают ширину 100%, что хорошо.

• Во втором примере .item = your div wrapper
  Вот почему ваши изображения приобретают нормальную ширину (в вашем случае 200 пикселей)

С помощью вышеуказанного CSS вы можете предотвратить это.