HTML Create an Equal Size Square Grid Picture System

Question

How do I create a picture grid system with equal size squares vertically and horizontally alligned? This is a 2 by 2 picture system below. For some reason the images are unallig

Answer 1

This can be done by setting background-imageto your div

.img-1 {
  background: url(https://statesymbolsusa.org/sites/statesymbolsusa.org/files/styles/symbol_thumbnail__medium/public/primary-images/Applesfreshpicked.jpg?itok=YmYkBfY7) no-repeat;
  background-size: cover;
  height: 300px;
  background-position:center
}

.img-2 {
  background: url(https://www.woodlandtrust.org.uk/media/100078482/Sycamore01.jpg?cb=-11897985&preset=gallery-tab-main-image) no-repeat;
  background-size: cover;
  height: 300px;
  background-position:center;
}

.img-3 {
  background: url(https://openbookphilly.com/wp-content/uploads/2016/11/bookstack.png) no-repeat;
  background-size:cover;
  height: 300px;
  background-position:center
}

.img-4 {
  background: url(https://media.wired.com/photos/5b86fce8900cb57bbfd1e7ee/master/w_582,c_limit/Jaguar_I-PACE_S_Indus-Silver_065.jpgColumn) no-repeat;
  background-size: cover;
  height: 300px;
  background-position:center
}

If you are looking to make the image fit completely in the col you can use bootstrap classes w-100 and h-100 for your images