Grid не выводит фото

Web Frontend: JavaScript, HTML/CSS
#1 
<div class="catalog">
                        <div class="catalog-img"></div>
                        <div class="catalog-img"></div>
                        <div class="catalog-img"></div>
                        <div class="catalog-img"></div>
                        <div class="catalog-img"></div>
                        <div class="catalog-img"></div>
                        <div class="catalog-img"></div>
                        <div class="catalog-img"></div>
                    </div>

css

.catalog{
    display: grid;
    grid-template-rows: repeat(4,1fr);
    grid-template-rows: 1fr 1fr;
}
.catalog-img{
background-image: url("img/ladder.png");
background-size: no-repeat;
  background-position: center;
background-size: cover;
width: 370px;
height: 340px;
}
#2

Что именно не выводит? Может адрес картинки неправильный?
У меня выводит https://jsfiddle.net/3ta76o05/

#3

Картинка выводиться в столбик,а мне нужно в две строчки,у меня гриды не когда нормально не работают,а сейчас вот запросили именно на них сделать проект,а на них вечно все ломается,как с ними работать не известно.

#4

Так тут в гриде дело, а не в фото.

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

Например, просто фиксированной ширины:

grid-template-columns: 375px 375px;
#5

Я нашла дело в колонке но думаю это еще не все )