adding Masonry style images to section of a website

Question

Ive been trying to add a masonry section of images to my website. However it is not aligning correctly. It just stacks the pictures onto of each other. How could I go about creating a masonry section using css/html? Or maybe creating a table that gives the masonry effect?

MY HTML:

<div class="masonry">
   <div class="item">IMAGE GOES HERE</div>
   <div class="item">SECOND IMAGE </div>
   THIRD IMAGE
   <div class="item">FOURTH IMAGE</div>
</div>

MY CSS:

.masonry { /* Masonry container */
    column-count: 4;
    column-gap: 1em;
}

.item { /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

The picture below is what I am trying to achieve:

Answer 1

Here you go:

#container {
  height: 100%;
  width: 100%;
}
#left > img:nth-of-type(1) {
  height: 25vh;
  width: 35vw;
}
#left > img:nth-of-type(2) {
  height: 60vh;
  width: 35vw;
}
#left, #right {
  display: inline-block;
}
#top-right, #bottom-right {
  display: block;
}
#top-right > img:nth-of-type(1) {
  width: 25vw;
  height: 60vh;
}
#top-right > img:nth-of-type(2) {
  width: 35vw;
  height: 60vh;
}
#bottom-right > img:nth-of-type(1) {
  width: 40vw;
  height: 25vh;
}
#bottom-right > img:nth-of-type(2) {
  width: 20vw;
  height: 25vh;
}

<div id="container">
  <div id="left">
    <img src="Image 1">
    <br>
    <img src="Image 2">
  </div>
  <div id="right">
    <div id="top-right">
      <img src="Image 3">
      <img src="Image 4">
    </div>
    <div id="bottom-right">
      <img src="Image 5">
      <img src="Image 6">
    </div>
  </div>
</div>