Grid layout with images

Question

I'm trying to build this grid layout for images with HTML and CSS.

I would like to use divs rather than table but I'm not sure what's the best way to go. Also I need to put a short description below each image.

Solution 1

I made up this simple responsive layout using floats and padding-bottom.

The padding bottom is used to simulate the height of the elements.

It can be a good start for you. If you want to go futher and learn more like for example add responsive images/text inside those squares, I advise you to check out grid of responsive squares. It descibes in detail a way to achieve a responsive grid of squares with centered content.

div {
  float: left;
}
div > div {
  background: #2C3E50;
}
#big_wrap, #small_wrap {
  width: 50%;
}
#big_wrap > div {
  width: 48%;
  padding-bottom: 48%;
  margin: 1%;
}
#small_wrap > div {
  width: 31.333%;
  padding-bottom: 31.333%;
  margin: 1%;
}

<div id="big_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
<div id="small_wrap">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

FIDDLE

Solution 2

Use this layout:-

HTML

<div class="main">

<div class="child">
    <div class="left">
        <div class="four"></div>
        <div class="four"></div>
    </div>

    <div class="left">
        <div class="four"></div>
        <div class="four"></div>
    </div>
</div>

<div class="child">
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
    <div class="right">
        <div class="nine"></div>
        <div class="nine"></div>
        <div class="nine"></div>
    </div>
</div>

CSS

.main {
width:100%;
float:left;
height:1%;
}
.child {
    width:50%;
    float:left;
}
.four {
    width: 96%;
    float:left;
    height: 150px;
    background:#35a;
    margin: 2% 0;
}
.nine {
    width:96%;
    float:left;
    height: 100px;
    background:#35a;
    margin: 2% 0;
}
.left {
    width:50%;
    float:left;
}
.right {
    width:33%;
    float:left;
}

Comments

[user3216026]

Thanks!! This is what I was looking for.

[user3216026]

Is there a way that I can add more squares in the small_wrap so thath it will add them on to the right end? I want to make it horizontal scrollable.

[web-tiki]

@user3216026 It is possible but it changes a lot of things, you should post an other question for that and post a link to it here in comments so I can find it.

[user3216026]

Ok I created a new question. Here is the link stackoverflow.com/questions/23156598/…

[raddevus]

Great example. Thanks very much. how did you come up with the sizes (% values) that look so good? Did you just estimate and then keep making changes or was this something you've done in the past? is there any guidance you know of that would help me get an idea with this? Thx

[web-tiki]

@daylight the sizes are calculated : the sum of the space taken by each element (width + margin left + margin right) must be equal to 100% to fill up their parent. example for the small elements on the right : 3 * (31.333 + 1 + 1) ~= 100 . You can also find another explanation in grid of responsive squares and mosaic of images