Creating a 'grid' for layout purposes

CliffyBiro · 7 Dec 2009 at 09:43

Is there a way to have thumbnails laid out in an evenly spaced grid on a page without using tables?

I'm assuming it can maybe be done via auto margins?

Can anyone shed any light on how this can be achieved? Thanks muchly for any help.

Tripnologist · 7 Dec 2009 at 09:58

Not that I'm aware of.

I usually do the following.
1. Get the first row spaced correctly using margin-left on the thumbs.
2. Apply an equal negative margin-left to the container to offset the margin-left on the thumbs. (otherwise you'll need a class on the first or last thumb of each row to remove the margin (depending on which side you place the margin).

So you just end up with

Code:

<div id="gallery">
   <a href="#"><img src="" alt="" /></a>
   <a href="#"><img src="" alt="" /></a>
   <a href="#"><img src="" alt="" /></a>
</div>

BFCTom · 7 Dec 2009 at 12:02

I just left float images within the gallery div. If you want the thumbnails to have no extra margin you'll need a class for the first and last.

Tripnologist · 7 Dec 2009 at 12:03

BFCTom said:
I just left float images within the gallery div. If you want the thumbnails to have no extra margin you'll need a class for the first and last.

Or you use negative margin on the container to offset the margin on the images.

CliffyBiro · 7 Dec 2009 at 12:04

Cheers guys.

BFCTom · 7 Dec 2009 at 12:06

Tripnologist said:
Or you use negative margin on the container to offset the margin on the images.

Or that would work. Sorry didn't see your original comments.

knowledge123 · 7 Dec 2009 at 14:31

You can do it in CSS very easily with divs which have a height and a width.

Quick, rough, example.

html

Code:

<div class="list">
 
<div class="item">
</div>

<div class="item">
</div>

<div class="item">
</div>

<div class="item">
</div>

</div>

css

Code:

div.list{
float:left;
}

div.item{
float:left;
height:30px;
width:30px;
display:inline;
}

knowledge123 · 7 Dec 2009 at 15:54

haha, good point!

Tripnologist · 7 Dec 2009 at 16:00

knowledge123 said:
What?! You can do it in CSS very easily with divs which have a height and a width.

He wants them evenly spaced out. Your html /css will have them all flush side by side. You can add margin to them to get them to be evenly spaced out, in which case, my original solution requires the last amount of markup.

knowledge123 · 7 Dec 2009 at 16:02

Tripnologist said:
Yes, I realise that but as you said, you'll need to set the dimensions whereas with a table, you don't.

I stick with my original comment and advice for how to do it. It requires the least markup.

But tables are a pain to update and are not as easily style-able.

I do see where you are coming from, and your reason for thinking that, but I have made many lists/galleries etc and never once needed to use a table.

Tripnologist · 7 Dec 2009 at 16:03

Have you even read my original post? I never said to do it in tables.

Tripnologist · 7 Dec 2009 at 16:06

I'll elaborate my original solution. (this is if he wants each thumbnail to link somwhere)

Code:

<div id="gallery">
   <a href="#"><img src="" alt="" /></a>
   <a href="#"><img src="" alt="" /></a>
   <a href="#"><img src="" alt="" /></a>
</div>

#gallery { margin-left: -10px; overflow: hidden;}
#gallery a { margin-left: 10px; float: left;}

With the above, you could have the images on the left and right lined to the edges of your container with even spacing. Accomplishing that without the negative margin would require a class on the first 'a' element of each row which is a pain.

knowledge123 · 7 Dec 2009 at 16:11

Tripnologist said:
Have you even read my original post? I never said to do it in tables.

*re-reads* ahhh, many apologies. I read it incorrectly

I stand corrected.

Tripnologist · 7 Dec 2009 at 16:12

It's all good. I really should have been more clear when I said "not that I'm aware of".
I was meaning that there isn't an easy way to get it to act exactly the same as tables without a lot of markup, making it pointless.