Search code examples
htmlcssgridalignmentphotos

How to make a three image grid system?

What I'm trying to do is put three images (this one: http://baseframe.co/a/img/animus.png) in a three column grid system with two layers.

I really struggle with putting divs next to each other so if anyone can explain it alongside the problem I'm having about, it'd be really helpful!

Thanks, Aaron

EDIT:

Here is my code: 

`http://codepen.io/aaronmtx/pen/PGdGyA`
Solution

  • You probably want to use display: inline-block. So...

    <div>
    <img src="...">
</div>
<div>
    <img src="...">
</div>
<div>
    <img src="...">
</div>

    Where each <div> and <img ...> is styled...

    div {
    display: inline-block;   
}

img {
    width: 100%;
}

    This is a very simple approach as you will likely want some additional styles to be applied. Constrain the width of each <div> to say 33% to get three equal sized images in a row. Then repeat the HTML so it will break the next three images on a new line. Applying a width of 100% to each <img ...> will ensure they don't spill out of their respective div containers.

    Hope this is what you were looking for!