HTML square crop thumbnail grid - html

Question

I'm trying to create a responsive grid of thumbnails using portrait and landscape images in HTML/CSS for Blogger. I haven't found any pre-made solutions that account for images in different orientations. I previously used the following code, but it's very cumbersome to use and uses tables:
<table style="margin-left:-3px;" border="0">
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://1.bp.blogspot.com/-PPFiMVxvw5Y/UWtx6pU68YI/AAAAAAAAAHg/j8bXN4KHUBU/s1600/4-108.jpg" imageanchor="1" title="Daylight">
<img style="position: absolute; top:-50px; border="0" src="http://1.bp.blogspot.com/-PPFiMVxvw5Y/UWtx6pU68YI/AAAAAAAAAHg/j8bXN4KHUBU/s150/4-108.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://1.bp.blogspot.com/-pchlGmQn8xU/UWtyEKIbKFI/AAAAAAAAAIQ/IUH8v3Pk9AE/s1600/4-71.jpg" imageanchor="1" title="Daylight">
<img style="position: absolute; top:-50px; border="0" src="http://1.bp.blogspot.com/-pchlGmQn8xU/UWtyEKIbKFI/AAAAAAAAAIQ/IUH8v3Pk9AE/s150/4-71.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://3.bp.blogspot.com/-k5oXNNfTR2o/UWtx7DHQMSI/AAAAAAAAAHo/IcfBH1B2Nr0/s1600/4-141.jpg" imageanchor="1" title="Hostage Calm">
<img style="position: absolute; left:-35px; border="0" src="http://3.bp.blogspot.com/-k5oXNNfTR2o/UWtx7DHQMSI/AAAAAAAAAHo/IcfBH1B2Nr0/s150/4-141.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-h-NZD0TSM4A/UWtx8VVYIII/AAAAAAAAAHw/Lf5_ohJl-BQ/s1600/4-153.jpg" imageanchor="1" title="Hostage Calm">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-h-NZD0TSM4A/UWtx8VVYIII/AAAAAAAAAHw/Lf5_ohJl-BQ/s150/4-153.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-pns3r8rdUVA/UWwszQPxmlI/AAAAAAAAAJU/c_MCm6pAQcM/s1600/4-131.jpg" imageanchor="1" title="Mixtapes">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-pns3r8rdUVA/UWwszQPxmlI/AAAAAAAAAJU/c_MCm6pAQcM/s150/4-131.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-g6od5jPw2To/UWws0cT-CCI/AAAAAAAAAJg/Zbt9oWC8MFg/s1600/4-132.jpg" imageanchor="1" title="Mixtapes">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-g6od5jPw2To/UWws0cT-CCI/AAAAAAAAAJg/Zbt9oWC8MFg/s150/4-132.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://4.bp.blogspot.com/-I4U9DF5jpUA/UWws0beG4jI/AAAAAAAAAJc/47wjlevC34k/s1600/4-42.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-I4U9DF5jpUA/UWws0beG4jI/AAAAAAAAAJc/47wjlevC34k/s150/4-42.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-rXjeRPm-XaU/UWws1EOjb9I/AAAAAAAAAJs/EEyk5RXHjsE/s1600/4-44.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-rXjeRPm-XaU/UWws1EOjb9I/AAAAAAAAAJs/EEyk5RXHjsE/s150/4-44.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-BXnqebnoEdg/UWws2twugaI/AAAAAAAAAJ0/URAOyty5PdQ/s1600/4-46.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-BXnqebnoEdg/UWws2twugaI/AAAAAAAAAJ0/URAOyty5PdQ/s150/4-46.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://1.bp.blogspot.com/-ZktVzEjRh6A/UWws2j8d26I/AAAAAAAAAJ4/msp0x00Qli0/s1600/4-58.jpg" imageanchor="1" title="You Blew It!">
<img style="position: absolute; left:-35px; border="0" src="http://1.bp.blogspot.com/-ZktVzEjRh6A/UWws2j8d26I/AAAAAAAAAJ4/msp0x00Qli0/s150/4-58.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://3.bp.blogspot.com/-Hljl68Y-3Bs/UWx446aZ83I/AAAAAAAAAKs/NrmAXgZ4SyY/s1600/4-5.jpg" imageanchor="1" title="Ages">
<img style="position: absolute; top:-50px; border="0" src="http://3.bp.blogspot.com/-Hljl68Y-3Bs/UWx446aZ83I/AAAAAAAAAKs/NrmAXgZ4SyY/s150/4-5.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://4.bp.blogspot.com/-JUkUq0Mjcy0/UWx47mM7-DI/AAAAAAAAAK0/MyMht6reYeU/s1600/4-7.jpg" imageanchor="1" title="Ages">
<img style="position: absolute; left:-35px; border="0" src="http://4.bp.blogspot.com/-JUkUq0Mjcy0/UWx47mM7-DI/AAAAAAAAAK0/MyMht6reYeU/s150/4-7.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-QhSig2DBDbo/UWx4iRPDEWI/AAAAAAAAAKM/gm8gz2lUBG8/s1600/4-137.jpg" imageanchor="1" title="Candy Hearts">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-QhSig2DBDbo/UWx4iRPDEWI/AAAAAAAAAKM/gm8gz2lUBG8/s150/4-137.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: -14px -20px 0px 0px;">
<a href="http://4.bp.blogspot.com/-jeYg22ByEiY/UWx4iUQpwxI/AAAAAAAAAKQ/7c9fiShT5y8/s1600/4-136.jpg" imageanchor="1" title="Candy Hearts">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-jeYg22ByEiY/UWx4iUQpwxI/AAAAAAAAAKQ/7c9fiShT5y8/s150/4-136.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 12px 0px;">
<a href="http://2.bp.blogspot.com/-ZY5qFY12QUI/UWx4oR14wKI/AAAAAAAAAKc/SW3BWT67pvA/s1600/4-38.jpg" imageanchor="1" title="Light Years">
<img style="position: absolute; left:-35px; border="0" src="http://2.bp.blogspot.com/-ZY5qFY12QUI/UWx4oR14wKI/AAAAAAAAAKc/SW3BWT67pvA/s150/4-38.jpg" />
</a></div>
</td></tr>
<tr><td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: 0px 12px 0px 0px;">
<a href="http://4.bp.blogspot.com/-RmmoPSuQips/UWx4vz9q2_I/AAAAAAAAAKk/PjaPD0VG8yc/s1600/4-44.jpg" imageanchor="1" title="Light Years">
<img style="position: absolute; top:-50px; border="0" src="http://4.bp.blogspot.com/-RmmoPSuQips/UWx4vz9q2_I/AAAAAAAAAKk/PjaPD0VG8yc/s150/4-44.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 120px; margin: -18px 14px 0px 0px;">
<a href="http://3.bp.blogspot.com/-UOzGYBBVICE/UWtyBGWxZaI/AAAAAAAAAIA/LkpQ7_niHvo/s1600/4-37.jpg" imageanchor="1" title="Turnover">
<img style="position: absolute; left:-35px; border="0" src="http://3.bp.blogspot.com/-UOzGYBBVICE/UWtyBGWxZaI/AAAAAAAAAIA/LkpQ7_niHvo/s150/4-37.jpg" />
</a></div>
</td> <td><div class="separator" style="clear: both; border: none; overflow: hidden; position: relative; width: 100px; height: 100px; margin: 0px 12px 0px 0px;">
<a href="3.bp.blogspot.com/-XZ843zdMTdU/UWtyAzXH8zI/AAAAAAAAAH8/6UwT0Gp3Ohg/s1600/4-21.jpg" imageanchor="1" title="Turnover">
<img style="position: absolute; top:-50px; border="0" src="3.bp.blogspot.com/-XZ843zdMTdU/UWtyAzXH8zI/AAAAAAAAAH8/6UwT0Gp3Ohg/s150/4-21.jpg" />
</a></div>
</td></tr>
</table>
Any help would be greatly appreciated!

Answer 1

For this I would recommend looking into Bootstrap; more precisely the Bootstrap grid system.
It looks like you have a lot of code right there. Bootstrap makes it easy and concise.
A solution with Bootstrap:
<div class="row">
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
</div>
<div class="row">
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
</div>
<div class="row">
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
<div class="col-md-4">your image</div>
</div>
Here you have 3 rows and in every row 3 column. Then, you can do the necessary to add your images.

Answer 2

#media only screen and (min-width:321px){ table,tr,td, thead, tbody,th {display:block;clear:both;width:100%;height:auto}
}