<article>
  <div class="grid">
    <div class="decrenmeaning a"><img src="http://zornet.ru/_fr/56/4193617.jpg" alt="ZorNet - портал для вебмастера">
      
      <div class="mudesabeg">Несовместимые плагины </div>
    </div>

    <div class="decrenmeaning b"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_3.jpg" alt="">
      <div class="mudesabeg">Viewport не установлен </div>
    </div>
    
     <div class="decrenmeaning c"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_2.jpg" alt="">
      <div class="mudesabeg">Контент шире экрана</div>
    </div>

    <div class="decrenmeaning d"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_4.jpg" alt="">
      <div class="mudesabeg">Текст слишком мал для чтения</div>
    </div>

    <div class="decrenmeaning e"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_5.jpg" alt="">
      <div class="mudesabeg">Сжатые элементы слишком близко друг к другу</div>
    </div>

    <div class="decrenmeaning f"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_6.jpg" alt="">
      <div class="mudesabeg">Анализ скорости страницы Googled</div>
    </div>

    <div class="decrenmeaning g"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_7.jpg" alt="">
      <div class="mudesabeg">Результаты следует интерпретировать</div>
    </div>

    <div class="decrenmeaning h"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_8.jpg" alt="">
      <div class="mudesabeg">Никто не может отрицать</div>
    </div>

    <div class="decrenmeaning i"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_9.jpg" alt="">
      <div class="mudesabeg">Вы хотите одеться немного </div>
    </div>

    <div class="decrenmeaning j"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_10.jpg" alt="">
      <div class="mudesabeg">Загрузка</div>
    </div>

    <div class="decrenmeaning k"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_11.jpg" alt="">
      <div class="mudesabeg">Исследования McKinsey</div>
    </div>

    <div class="decrenmeaning l"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_12.jpg" alt="">
      <div class="mudesabeg">Некоторые люди говорят</div>
    </div>

    <div class="decrenmeaning m"><img src="http://zornet.ru/s.cdpn.io/12005/aea19_13.jpg" alt="">
      <div class="mudesabeg">Просто введите свой URL</div>
    </div>
  </div>
</article>

img {
  max-width: 100%;
}

.decrenmeaning {
  display: grid;
  grid-template-rows: 1fr auto;
}

.decrenmeaning img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  grid-row: 1 / 3;
  grid-column: 1;
}

.decrenmeaning .mudesabeg {
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 200px;
  grid-gap: 20px;
}

@media (min-width: 800px) {
  .grid {
    max-width: 1200px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    grid-auto-flow: dense;
  }

  .a {
    grid-column: span 2;
    grid-row: span 2;
  }

  .g {
    grid-column: span 2;
    grid-row: span 2;
  }

  
}