Context

Moroccan souk Moroccan souk Moroccan souk Moroccan souk
Moroccan souk Moroccan souk Moroccan souk Moroccan souk
Moroccan souk Moroccan souk Moroccan souk Moroccan souk

Image Grid

A grid of equal size images that scale equaly as the viewport width changes.

            
                        <style>
	/* Fluid Image Grid Pattern CSS */
    @media only screen and (max-width: 599px) {
        td[class="pattern-grid"] img{
            width: 100% !important;
            height: auto !important;
        }
        td[class="pattern-grid"] td {
            display: block;
            float: left;
            width: 25%;
        }
    }
    @media only screen and (max-width: 520px) {
        td[class="grid"] td { width: 50%; }
    }
    @media only screen and (max-width: 350px) {
        td[class="grid"] td { width: 100%; }
    }
</style>

<table cellpadding="0" cellspacing="0">
    <tr>
        <td class="pattern-grid" width="600">
            <table cellpadding="0" cellspacing="0" width="100%">
                <tr>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                </tr>
                <tr>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                </tr>
                <tr>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                    <td><img src="souk.jpg" alt="Moroccan souk" width="150" style="display: block; border: 0;" /></td>
                </tr>
            </table>
        </td>
    </tr>
</table>