Grid and Column Designs


	Grid and Column Designs
eshenker
5-6-2008 7:22 AM
131 views
tags:
optional. separate by commas., blog, design, graphics
Add a Comment
Login to Comment. Not a member yet? Sign up
View the Top Clips from May 6, 2008
Embed This Clip In Your Site...
<div style="margin: 12px 0px; font-family: arial; color: #333333; background: #ffffff; border: solid 4px #e5e5e5; width: 100%; clear: left;"><div class="CM_CTB_Content_Wrap" style="margin: 0px; padding: 0px;background-color: #ffffff;"><div style="border-bottom: solid 1px #dcdcdc; white-space: nowrap; margin-bottom: 8px; background-color: #eeeeee ;background-image: url(http://www.clipmarks.com/images/source-bg.gif); background-repeat: repeat-x; height: 24px; line-height: 24px; vertical-align: middle; padding-bottom: 4px; color: #666666; font-size: 10px;" ><a href="http://clipmarks.com/clip-to-blog/" title="see clips that are hot right now"><img src="http://content.clipmarks.com/blog_embed/10fed9b0-4a2c-401b-bfd4-045544d2c4ce/605D1386-514A-4196-B6E4-1F4199754B43/" alt="" width="19" height="19" border="0" style="vertical-align: middle; margin: 0px 4px; display: inline; border: none; float:none;" /></a>clipped from <a title="http://www.webdesignerwall.com/trends/grid-and-column-designs/" href="http://www.webdesignerwall.com/trends/grid-and-column-designs/" style="font-size: 11px;">www.webdesignerwall.com</a></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/">If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites — whether a massive content editorial site or just a personal blog. Check out how the layout can be divided into 3 columns, 4 columns, a mixture of narrow and wide columns.</blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">The New York Times<BR /><A class="image" href="http://www.nytimes.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/nytimes.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">National Post<BR /><A class="image" href="http://www.nationalpost.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/nationalpost.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Guardian<BR /><A class="image" href="http://www.guardian.co.uk" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/guardian.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Times Online<BR /><A class="image" href="http://www.timesonline.co.uk" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/timesonline.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Wired News<BR /><A class="image" href="http://www.wired.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/wired.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Porfolio<BR /><A class="image" href="http://www.portfolio.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/portfolio.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">We Are Survival Machines<BR /><A class="image" href="http://www.wearesurvivalmachines.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/wearesurvivalmachines.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">UX Magazine<BR /><A class="image" href="http://www.uxmag.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/ux-magazine.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><H3 class="border-top">Grid in blog design</H3></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><P>Here are some of the blogs that adapted the grid style. I have to specially mention <A href="http://www.subtraction.com" >Khoi Vinh</A>, who played the big part in <A href="http://www.subtraction.com/archives/2004/1231_grid_computi.php" >grid web design</A>.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">AI Alex<BR /><A class="image" href="http://www.aialex.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/aialex.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">5 Thirty One<BR /><A class="image" href="http://5thirtyone.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/5thirtyone.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Subtraction<BR /><A class="image" href="http://www.subtraction.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/subtraction.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Astheria<BR /><A class="image" href="http://www.astheria.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/astheria.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Jeff Croft<BR /><A class="image" href="http://jeffcroft.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/jeffcroft.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Hell Yeah Dude<BR /><A class="image" href="http://hellyeahdude.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/hellyeahdude.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Jon Tangerine<BR /><A class="image" href="http://jontangerine.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/jontangerine.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Mark Boulton Design<BR /><A class="image" href="http://www.markboultondesign.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/markboulton.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">The Technology Herald<BR /><A class="image" href="http://www.thetechnologyherald.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/thetechnologyherald.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Gapers Block<BR /><A class="image" href="http://www.gapersblock.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/gapersblock.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><H3 class="border-top">Break out of the box</H3></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><P>Column design doesn’t mean you have to be within the box. See how you can break out of the box by using images to form unsymmetrical shapes.</P></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">UC Berkeley<BR /><A class="image" href="http://spanish-portuguese.berkeley.edu" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/berkeley.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">J R Velasco<BR /><A class="image" href="http://www.jrvelasco.com" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/jrvelasco.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">Chrizdee<BR /><A class="image" href="http://www.chrizdee.de" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/chrizdee.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><li style="margin-left:16px;padding-left: 0px;">AIGA Los Angeles<BR /><A class="image" href="http://www.aigalosangeles.org" ><IMG alt="screencap" src="http://www.webdesignerwall.com/wp-content/uploads/2008/02/aigalosangeles.jpg" /></A></LI></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.webdesignerwall.com/img/FF76F57C-3418-42EA-AC31-F693249268DC" alt="screencap" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.webdesignerwall.com/img/880A5788-D9A0-403A-9220-0521CA42DBEA" alt="screencap" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.webdesignerwall.com/img/0F36B019-7EA7-421F-B38E-4626C9CF30AC" alt="screencap" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.webdesignerwall.com/img/43A96F1A-C257-467D-A945-AAC898F793E7" alt="screencap" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><div align="center"><img src="http://content9.clipmarks.com/blog_cache/www.webdesignerwall.com/img/094645E6-E6F0-4F89-846B-618869177B4D" alt="screencap" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><div align="center"><img src="http://content6.clipmarks.com/blog_cache/www.webdesignerwall.com/img/B1653377-993C-4436-A6A1-8D843B05A1DA" alt="screencap" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><div align="center"><img src="http://content7.clipmarks.com/blog_cache/www.webdesignerwall.com/img/05B8C40D-D02E-4396-9F16-AAED288A49FB" alt="screencap" /></div></blockquote><div style="height: 2px; font-size: 2px; background: #dcdcdc; border-bottom: solid 1px #f5f5f5; margin: 2px 4px;"></div><blockquote style="text-align: left; padding: 0px 8px; margin: 4px 0px 8px 0px; background: transparent; border: none;" cite="http://www.webdesignerwall.com/trends/grid-and-column-designs/"><div align="center"><img src="http://content8.clipmarks.com/blog_cache/www.webdesignerwall.com/img/34108CA6-6487-4462-8B32-E5267FB582CA" alt="screencap" /></div></blockquote></div><div style="margin: 0px 6px 6px 4px;"><table style="font-size: 11px;border-spacing: 0px;padding: 0px;" cellpadding="0" cellspacing="0" width="100%"><tr><td style="background:transparent;border-width:0px;padding:0px;">&nbsp;</td><td align="right" style="background:transparent;border-width:0px;padding:0px;width:107px" width="107"><a href="http://clipmarks.com/share/605D1386-514A-4196-B6E4-1F4199754B43/blog/" title="blog or email this clip"><img src="http://content9.clipmarks.com/images/c2b-foot.png" border="0" alt="blog it" width="107" height="17" style="border-width:0px;padding:0px;margin:0px;" /></a></td></tr></table></div></div>
Clipmarks: Home; New Clips; Top Clips; Dashboard
Popular Topics: News; Life; Science; Technology; Entertainment
Get Started: Sign Up; Install Clipping Tool; How Clipping Works; Clip-to-Blog™; ClipSearch
Tools and Resources: FAQ; ClipWeek; Top Clippers; Top Tags; Site Map
About Clipmarks: About Us; Contact; Blog; Copyright; Privacy; EULA
Search Options

Related Clips

More clips from eshenker

Today's Top Clips
