Image grid

by Saksham Malhotra

HTML

<div class="grid products-row row">

  <div>
    <div></div>
  </div>

  <div>
    <div></div>
  </div>

  <div>
    <div></div>
  </div>
  <div>
    <div>
    </div>

  </div>
</div>

CSS

.grid>div>div {
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.grid>div:nth-child(1)>div {
  background-image: url('https://article.images.consumerreports.org/prod/content/dam/CRO%20Images%202019/Magazine/04April/CR-Cars-InlineHero-ComingSoon-Toyota-Supra-2-19');
}

.grid>div:nth-child(2)>div {
  background-image: url('https://media.wired.com/photos/5aa18e3edc9df6500b90747b/master/pass/CarRoundup-Mclaren.jpg');
}

.grid>div:nth-child(3)>div {
  background-image: url('https://www.autocar.co.uk/sites/autocar.co.uk/files/styles/body-image/public/911-road-3629a.jpg?itok=m6x23Go0');
}

.grid>div:nth-child(4)>div {
  background-image: url('https://cdn2.carbuyer.co.uk/sites/carbuyer_d7/files/2017/12/lamborghini-urus-8_1.jpg');
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.products-row {
  grid-template-columns: repeat(4, 1fr);
}