CODEWITHSUNDEEP
htmlcss
MCC
MCC

Reputation: 542

HTML/CSS image grid line up of images

I am making a website using HTML and CSS, I started on creating a section that will hold 9 images of different sizes. After I had made all of the different sizes and inserted them into the website it didn't turn out how I wanted it to. I was hoping it would turn out something like this: Image of grid I was hoping for 

section {
  background-color: black;
  width: 1346px;
  height: 400px;
  float: left;
}
<section>
  <img src="http://s30.postimg.org/njfrtgaoh/300x200.png" align="top-right" alt="" />
  <img src="http://s11.postimg.org/v0d12pcyr/200x100_2.png" align="top" alt="" />
  <img src="http://s22.postimg.org/s8jfeeiep/500x400.png" align="top-right" alt="" />
  <img src="http://s22.postimg.org/uxiti6d9t/200x200_2.png" align="top-right" alt="" />
  <img src="http://s13.postimg.org/463k9fm8j/146x100.png" align="top" alt="" />
  <img src="http://s14.postimg.org/prasnic9d/200x100.png" align="top" alt="" />
  <img src="http://s30.postimg.org/hz3aitbtd/500x200.png" align="top-right" alt="" />
  <img src="http://s8.postimg.org/56vmkw3kl/200x200.png" align="top-right" alt="" />
  <img src="http://s23.postimg.org/670g2cmaz/146x300.png" align="top" alt="" />
</section>

With the images you will have to look and Imagen them but a bit to the right so it will fit in.

Upvotes: 0

Views: 116

Answers (2)

Federico
Federico

Reputation: 1422

You can start working from this fiddle I made for you: https://jsfiddle.net/vc7tdpzz/

  var container = document.querySelector('#grid');
  var masonry = new Masonry(container, {
  columnWidth: 100,
  itemSelector: '.grid-item'
  });

Upvotes: 0

Federico
Federico

Reputation: 1422

You have to consider using Masonry.js.
Have a look at this example: http://codepen.io/desandro/pen/vLeBLV

<script src="https://npmcdn.com/[email protected]/dist/masonry.pkgd.js"></script>

Upvotes: 1

Related Questions