How to create block style Grid

Hello Experts,

I'm trying to create a Block Style Grid like Foundation Zurb and the Gumby Framework has done but with my own percentages for the widths. Foundation calls it "block-grid" and Gumby calls it "tiles".

What I'm trying to accomplish is to place multiple images with different widths and heights and have them display as a block style on my website. I also want the images to not collapse at different viewport sizes. So, for example, if I have 5 images lined up as a block then as the window resize down I still want those 5 images to remain intact without them going down to the next line. If you look at my example below you will see a "5" which means that i want 5 images to line up next to each other horizontally. If i were to have "block-grid-7" then I would want 7 images to line up next to each other etc....

Please look at my current site here http://grid.ocait.com/blockgrid/index.html. Below is what I have for that page but it's showing two across and not 5, not to mention the images do not flow properly.

<ul class="block-grid five">
                    <li><img src="../photos/mid4th_1.jpg"></li>
                    <li><img src="../photos/mid4th_2.jpg"></li>
                    <li><img src="../photos/mid4th_3.jpg"></li>
                    <li><img src="../photos/mid4th_4.jpg"></li>
                    <li><img src="../photos/mid4th_5.jpg"></li>
                    <li><img src="../photos/mid4th_6.jpg"></li>
                    <li><img src="../photos/mid4th_7.jpg"></li>
                    <li><img src="../photos/mid4th_8.jpg"></li>
                    <li><img src="../photos/mid4th_9.jpg"></li>
                </ul>

This is driving me crazy so I would really appreciate it if someone could help me!!!
LVL 4
asp_net2Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
In your css you had the width as being 40%.  This should be 20% if you want 5 across.  40% would give you 2.

i.e.

.block-grid.five > li {
  width: 20%;
}

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
asp_net2Author Commented:
Ok, but how do I prevent them from wrapping down to the next line? So, if I have 5 images across when I resize the browser window down I still want those same 5 images to stay put and not wrap down.

Please also keep in mind I may have 20+ <li> images items listed but I only want 5 to show per row.
RobOwner (Aidellio)Commented:
That's right... when I scale down your site (with the width at 20%)  it stays at 5 per row.  That is what you want right?

Also adjust your padding to be a percentage rather than a fixed amount:

.block-grid > li {
  float: left;
  height: auto;
  display: block;
  padding: 0 1% 2%;
}
asp_net2Author Commented:
Hi Rob,

I adjusted the width to 25% for 4 images per row but that did not help. If you look at my page you will see that the 5th image wraps down to it's own line and then it starts another 4 images below that. I need all images after 4 per row to wrap to a new line without skipping a row. I did look at that particular photo and it's dimensions are smaller than the other images. But that should not matter. It should still wrap down.

http://grid.ocait.com/blockgrid/index.html
RobOwner (Aidellio)Commented:
Sorry, the notif of your comment must've got lost.

I'm not see the issue in my browser.  What browser are you using?
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.