Creating a CSS grid layout with images

Question

I'm trying to make a nice grid layout using CSS but can't get them to display in rows of 3 with an individual column row of 33.3333%

The grid style I'm going for is this.

Here is the code I have so far;

HTML:

    <section id="web">
   <div class="row">
   <span class="web large-3 columns"><img src="images/1.gif"></span>
   <span class="web large-3 columns"><img src="images/2.jpg"></span>
   <span class="web large-3 columns"><img src="images/3.png"></span>
   </div>
   <div class="row">
   <span class="web large-3 columns"><img src="images/4.jpg"></span>
   <span class="web large-3 columns"><img src="images/5.png"></span>
   <span class="web large-3 columns"><img src="images/6.jpg"></span>
   </div>
</section>

CSS:

section { display: block; }

section#web {
background: #f8f8f8;
padding: 80px 0;
}

.row {
width: 100%;
margin: 0 auto;
max-width: 1144px;
}

span.web {
margin-bottom: 20px;
text-align: center;
position: relative;
border: 1px solid #e3e3e3;
}

.row .large-3 {
position: relative;
width: 33.33333%;
}

.row .columns {
position: relative;
padding-left: .83333em;
padding-right: .83333em;
width: 100%;
float: left;
}

My JSFiddle.

Could be an issues with the 33.333%, sometimes browsers have different behaviors for decimals. — Peter Jewicz
– Peter Jewicz, Commented Jul 11, 2014 at 23:52

ofer dofer · Accepted Answer · 2014-07-11 23:58:19Z

2

You set the width as pixels. Instead, you should use percentages e.g width: 33%. And 33.3 for this layout is a bad choice as you applied 20px for margins. Maybe 28% would be fine.

The fiddle: http://jsfiddle.net/Vfffg/119/

.container > div {
  margin: 20px;
  width: 28%;
  height: 100px;
  background: blue;
  float: left;
  color: #fff;
  text-align: center;
}

answered Jul 11, 2014 at 23:58

ofer dofer

6212 gold badges11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Creating a CSS grid layout with images

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related