Creating a grid layout for images

Question

I'm trying to design a layout of images / divs like the following using HTML & CSS.

Here's my attempt:

HTML

<div id="container">
  <div class="bigBox">
   </div>
 <div class="box 1"></div>
 <div class="box 2"></div>
 <div class="box 3"></div>
 <div class="box 4"></div>
</div>

CSS

#container {
width: 100%;
height: 415px;
}

.bigBox {
float: left;
width: 400px;
height: 290px;
}

.box {
width: 244px;
height: 200px;
float: right;
margin: 0;
padding: 0;
}

.1 { background: url("http://i.imgur.com/zYerntp.png"); background-color: red;}

However, obviously the code is not working how I expected it to be, I've tried puting the container inside relative positioning with the elements inside as absolute but it didn't work.

Any suggestions?

Answer 1

You can achieve this layout with CSS flexbox.

HTML

<div id="container-outer">
    <div class="bigBox"></div>
    <div id="container-inner">
        <div class="box a"></div>
        <div class="box b"></div>
        <div class="box c"></div>
        <div class="box d"></div>
    </div>   
</div>

CSS

#container-outer {
    display: flex;
    height: 300px;
}

.bigBox {
    width: 400px;
    height: 300px;
    background-color: orangered;
}

#container-inner {
    display: flex;
    flex-wrap: wrap;
}

.box {
    width: 244px;
    height: 150px;
}

.a, .d { background-color: skyblue; }
.b, .c { background-color: red; }

DEMO

Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.