HTML5/CSS Re-Flow Grid Layout

Question

I've been looking for a way to do this for some time, and I haven't yet come across anything. What I'm after is to be able to display a series of pictures in a grid layout, ordered from left to right then up and down. I want it to take up as much space as is available on each row (whilst adhering to certain conditions such as padding between images) and when the window is re-sized, it will automatically re-calculate where the images should be positioned.

I put together the following graphic to help aid what I'm trying to get at:

Example of re-flowing grid layout

Is there any easy way to do this in CSS, HTML5 and/or JavaScript?

Thanks, Josh.

user1234 · Accepted Answer · 2013-12-19 16:53:09Z

4

The "easy" way:

img {
    float: left;
}

Here's a jsfiddle. http://jsfiddle.net/Sp3pU/

edited Dec 19, 2013 at 16:53

answered Jul 18, 2013 at 2:16

user1234

9,1284 gold badges30 silver badges37 bronze badges

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

1 Comment

StackSlave Over a year ago

This will not account for image sizes, or the container having strange space an the end.

StackSlave · Accepted Answer · 2013-07-19 01:55:43Z

Use percentages. Try something like:

#outer{
  height:400px; width:400px;
}
#outer img{
  width:30%; border:0; margin:2%; float:left;
}
#outer #bd{
  clear:left;
}

Your HTML could include:

<div id='outer'>
  <img src='whatever1.png' alt='whatever1' />
  <img src='whatever2.png' alt='whatever2' />
  <img src='whatever3.png' alt='whatever3' />
  <img src='whatever4.png' alt='whatever4' />
  <img src='whatever5.png' alt='whatever5' />
  <img src='whatever6.png' alt='whatever6' />
  <img src='whatever7.png' alt='whatever7' />
  <img src='whatever8.png' alt='whatever8' />
  <img src='whatever9.png' alt='whatever9' />
  <img src='whatever10.png' alt='whatever10' />
  <img src='whatever11.png' alt='whatever11' />
  <img src='whatever12.png' alt='whatever12' />
  <div id='bd'></div>
</div>

Adjust margins as necessary. It's 2% off, since 3 30% imgs would take up 90%, then do to margin overlapping that should be 4 margins at 2%, so 8% for a total of 98%. You might want to use 20% widths with 4% margins, for 4 across and 100%.

Collectives™ on Stack Overflow

HTML5/CSS Re-Flow Grid Layout

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related