How To Arrange Images 3x3?

I have nine images and if I have to arrange them 3x3,which means 3 rows and 3 columns. What would be the best way of doing it? Should I be using CSS?

Solution 1:

3x3 Grid of images

This css allows you to:

1. centers images vertically
2. centers images horizontally
3. allows images of various sizes
4. smaller than the grid size images keep original size, to not have the blurred images
5. bigger images get resized to the desidered value
6. that can simply be changed in the 3th part of the css with setting the max-width & max-height
7. and obiovsly it keeps the aspect ratio

This is achieved using float-left & the line-height trick;

HTML

<div class="grid3x3">
 <div><img src="http://placekitten.com/200/300"></div>
 <div><img src="http://placekitten.com/240/300"></div>
 <div><img src="http://placekitten.com/400/300"></div>
 <div><img src="http://placekitten.com/280/300"></div>
 <div><img src="http://placekitten.com/210/140"></div>
 <div><img src="http://placekitten.com/240/200"></div>
 <div><img src="http://placekitten.com/100/300"></div>
 <div><img src="http://placekitten.com/200/100"></div>
 <div><img src="http://placekitten.com/700/300"></div>
</div>

CSS

.grid3x3{
 width:300px;
 height:300px;
 clear:both;
}
.grid3x3>div{
 width:100px;
 height:100px;
 float:left;
 line-height:100px;
 text-align:center;    
}
.grid3x3>div>img{
 display:inline-block;
 vertical-align:middle;
 max-width:80%;
 max-height:80%;
}

DEMO

http://jsfiddle.net/c4gb8/

extra styling..

http://jsfiddle.net/c4gb8/1/

and javascript click handler

http://jsfiddle.net/c4gb8/2/

Solution 2:

using ul li

<ul>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
<li><a href=""><img src="image.jpg"/></a></li>
</ul

DEMO

Solution 3:

Your HTML -

<div>
 <div class="row1">
     <img src="" />
 </div>
 <div class="row1">
     <img src="" />
 </div>
 <div class="row1">
     <img src="" />
 </div>
</div>

<div>
 <div class="row2">
     <img src="" />
 </div>
 <div class="row2">
     <img src="" />
 </div>
 <div class="row2">
     <img src="" />
 </div>
</div>

<div>
 <div class="row3">
     <img src="" />
 </div>
 <div class="row3">
     <img src="" />
 </div>
 <div class="row3">
     <img src="" />
 </div>
</div>

Your CSS -

.row1,row2,row3
{
   display: inline-block;
}

Solution 4:

You can use sprite sheet. That will arrange in a regular grid. Sass will do this easily or you can use css.

try online

css sprite generator

Solution 5:

<div class="row3">
    <img src="#"  />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
    <img src="#" />
</div>

css

   <style>
            .row3 img  {
                width:33%;
                height:33%;
                float:left;
                display:inline-block;
                border:solid 1px red;
            }
        </style>