In our daily web hunting raids we have spotted another interesting & good-looking trend – the fluid grid-based layout, mostly used by galleries and visual inspiration blogs. Here are 12 amazing examples (just one of them in Flash) and a fantastic tutorial. Please use the comment box for suggestions and opinions – Will the future of webdesign be fluid?
Creative Depart
Isolation Unit
Reform & Revolution
Xpaider
Heavy Eyes
De51gn
Positively Melancholy
siXsiXsiX
Type Neu
This Also
dmtr
Space Collective
PS: Almost all this websites are usng the Grid-A-Licious theme folks!
Related Articles
- 15 Fresh WordPress Themes To Get The Coolest Portfolio For You Or Your Studio
- Web Design Trend Hunting – The Messy Desk: Examples & Best Practices
- Vintage 2.0 – Glossy Retro Takes Over Web Design
Catalin is the founder of Mostash – a social marketing boutique – and he’s always happy to share his passion for graphic design & social media.
Latest posts by Catalin Zorzini (see all)
- Create a Playlist of Your Daily Experiences with the Compass.to iPhone App – March 14, 2013
- Inspired Talks: Alvin Diec – November 22, 2012
- HOW TO: Build your Brand Online [Infographic] – November 15, 2012
- How to Tell If Your Blog Is Making an Impression – November 15, 2012
- 12 Hours Left: The Ultimate WordPress Theme Builder for $35! – November 14, 2012
Our web design HP2-H08 tutorials offers huge collection of web designs to help you become expert in design work. Download the JN0-202 tutorials and expert 000-966 guides for step by step learning of web designing.
Great list. Nice job.
Thanks for this cool list.
Great collection,good job! I’v submitted a link of this article to our website http://www.webmasterclip.com in order to share it with more people.Thanks~
I think 90% of these are modified versions of Grid-A-Licious theme by Suprb for WordPress. I might be wrong though.
Some nice samples here.
They’re all based on a theme released by typeneu and reform. Not that creative action to follow.
The WordPress grid-a-licious theme (used in many of the above) probably deserves a mention…
i seriously feel this will be a must for every website coz of the immense variety of screens we have so far. don’t know how many more sizes will we see in near future.
We use something similar on our site http://www.nofavorite.com.
Thanks guys, almost all the credit goes to teh Grid-A-Licious theme!
Perfect article, exactly what I was looking for thanks!
Nice review,
We’ve been having a custom grid theme for 6 months already, dont know if you saw ours, but it a little more complex than those one, and thanks god, there is nothing similar on the web (yet! unfortunately it will com one of those days)
Have a look at http://cyanatrendland.com and especially our gallery page http://cyanatrendland.com/images/
Let me know ….
Bear in mind that the majority of these sites use the same theme – Grid-a-licious – with the colours tweaked…
http://suprb.com/apps/gridalicious/
I have stopped posting Grid-a-licious themed sites on http://siteinspire.net because I think it’s time for something new…
And also all these sites are ‘matrix’ or grid style layouts. Would have been more interesting to see fluid application or editorial layouts since this is much more challenging to do well.
Great examples of decent fluid grid layouts. I’ve just completed my company site using a nice fluid grid layout at http://www.zaum.co.uk
I don’t get it. I tried the first six sites and only one was fluid — aka, it changed width with the window. What are you guys seeing that I’m not?
Different feel of layout which can provide the most visible information to visitors at one instance. Nice concept.
Nice article.
I cant at all get gridalicious to work. I was excited thinking these were other grids that had nothing to do with grid-a-licious. this is my site. id like a grid approach with categories. if anyone wants to contact me and sell me their wizadry at a good decent price. my twitter is girlonthestreet. thanks!
Its getting closer and closer from our layout – but nothing like it yet – still way ahead in the trends…
[...] The Messy Desk, The Fluid Grid Layout, and The Circle As A Design Fetish, our Trend Hunting series continues with a big roundup of cool [...]
doesn’t grid-a-liscous rely 100% on javascript? and with JS disabled, the sites literally fail to render in any readable form..?
i’ve tested the grid-a-liscious site itself, and w/o JS, it fails to degrade with any grace what-so-ever.
have i got it wrong, or should sites still load without JS ..?
You’re internet’s going to suck without JS anyway right? People keep giving all the credit to Grid-a-licious which is based off Space Collective’s card theme done 2 years prior.
Damn you”’r'e’re’
[...] Web Design Trend Hunting—Fluid Grid Layout: 10+ Outstanding Examples and 1 TutorialThis post from Inspired Magazine offers up ten great examples of fluid grid designs, as well as a tutorial for creating your own fluid grid-based designs. [...]
[...] Web Design Trend Hunting—Fluid Grid Layout: 10+ Outstanding Examples and 1 Tutorial This post from Inspired Magazine offers up ten great examples of fluid grid designs, as well as a tutorial for creating your own fluid grid-based designs. [...]
[...] Web Design Trend Hunting—Fluid Grid Layout: 10+ Outstanding Examples and 1 Tutorial This post from Inspired Magazine offers up ten great examples of fluid grid designs, as well as a tutorial for creating your own fluid grid-based designs. [...]
[...] Web Design Trend Hunting—Fluid Grid Layout: 10+ Outstanding Examples and 1 Tutorial This post from Inspired Magazine offers up ten great examples of fluid grid designs, as well as a tutorial for creating your own fluid grid-based designs. [...]
[...] http://www.inspiredm.com/2009/07/03/web-design-trend-hunting-fluid-grid-layout-10-outstanding-exampl… by admin 未分類 コメント (1) [...]
[...] Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial [...]
Makes me giddy. Seriously
[...] designs. Well indeed the trend is getting popular now and is spotted by other website too like InspiredMag. I really like this design style because the layout is well organized and professional looking [...]
great, but what’s with the tutorial link?
Hi,
I was wondering if you could point me in the right direction. I am looking for a fluid grid layout for my portfolio on WordPress. I would add tomy page and then tweak the colours and stuff to make it more of my own. Do you know any WP templates where you can get the layout for free?
Hey Catalin,
Its really a very nice collection, keep up the good work :)
cheers
[...] http://www.inspiredm.com/2009/07/03/web-design-trend-hunting-fluid-grid-layout-10-outstanding-exampl… Designscreen resolution Share Leave a comment0 Comments. [...]
Are there any open source or cheaper alternatives to grid a licious?
Yep, try the tanzaku theme for wordpress
Dfunk try http://cargocollective.com/
great cms and creative community, creating by the same guy who created Space Collective if I’m correct..
*created
[...] Web Design Trend Hunting – Fluid Grid Layout: 10+ Outstanding Examples & 1 Tutorial | Insp… ウインドウの幅に応じてコンテンツが再配置される可変グリッドシステムのサイトが紹介されてます。 [...]
Grid Layout Generator
http://www.pagecolumn.com/grid_layout_generator.htm
Most of these aren’t truly fluid. Just the same so-so grid based system that fails when you get too small. It’s be nice to see some truly creative, properly fluid designs instead that also work when JS is off.