Search code examples
htmlcssresponsive-designgrid-layout

Grid layout with images

grid layout with imges

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

  • 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