40+ Great Examples of Grid Style in Web design

June 30, 2013 · 12 comments

by Lars

grid-style-in-web-design

The concept of grid-by-design has become very popular in web design but it isn’t new in any way. In fact the bees, the bridge builders, chess masters etc. have known the secret of the grid for centuries. Using grids in web design makes the website look well structured and balanced even if the pages are busy with many elements. Also for the developer grids are useful and helps maintaining the pages easier. Grid in web design is basically a style in which a website is divided into different grids i.e. vertical and horizontal lines so that you can position different design elements efficiently and effortlessly. There are several CSS grid and responsive layout frameworks and solutions you can use to build your own grid based websites, but you will probably need the inspirational collection below. website templates with responsive layouts also typically have been designed using grids to adapt to smaller view ports, know as responsive grids. Same is true for magazine themes to make it possible to have the many content areas in the layout. In this article I have collected 40 examples of websites that use some form of grid styled layout.


ElegantThemes
ThemeForest

Advertisement

1. It’s Nice That Shop

It’s Nice That Shop

2. Superawesome

Superawesome

3. Designunit

Designunit

4. Ourhype

Ourhype

5. House of Burvo

House of Burvo21

6. Chambers Judd

Chambers judd

7. Tastespotting

Tastespotting

8. Sylvain Toulouse

Sylvian Toulouse23

9. Sunil Kansara

Sunil kansara23

10. avec1y

avec1y23

11. Mark Boulton design

Mark Boulton

12. Kyle Tezak

Kyle T

13. Jesus Rodriguez Velasco

Jesus Rodriguez

14. The morning news

the Morning News

15. Ungarbage

ungarbage

16. Hatbox

hatbox

17. I am Shimone

I am Shimone

18. Teachinghistory

teaching History

19. Macalicious

Macalicious

20. Shape creative and digital studio

Shape and creative

21. 31Three

31three

22. Rita

Rita22

23. Bisgrafic

Bisagraffic

24. UX Magazine

UX magazine

25. Velhetica

Velhetica

26. Best awards

best awards

27. Cool and the guide

Cool and the guide

28. Quipsologies

Quipsologies

29. Moodyguy

Moodyguy

30. Jake Przespo

jake Przespo

31. Andy Rutledge

andy rutledge

32. Thought and Theory – Collection

Thought and Theory Collection21

33. Tokyo Illustrator’s Society

tokyo Illustrator32

34. Barnbrook Film

barnbrook

35. Grandpeople

grandpeople23

36. Oi Polloi

Oi Polloi21

37. Malika Favre

Malika favre

38. Quaker ninja

Quaker Ninja23

39. Progress Packaging

progress packaging21

40. MCQ

MCQ

41. Black Box Press

Black Box Press

42. notcot

notcot

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

{ 7 comments… read them below or add one }

jay kanakiya July 17, 2012 at 9:25 am

This is if you want to build the above websites easily .Combinig the responsive grid system and YUI gridbuilder ,I have made the jQuer.in Grid Builder.Its outputs semantic html based on the IDs and classes given by the user

Reply

Web Design Nottingham August 4, 2011 at 5:55 pm

Brilliant stuff, Love grid style!

Reply

Zeth November 30, 2010 at 1:45 am

No problem. That design gave me some ideas how to use the grid, so no… Thank you :D.

Reply

Dustin Betonio November 30, 2010 at 1:37 am

Thanks for liking one that is featured zeth, and yes i agree grid-designs are hard.

Reply

Zeth November 29, 2010 at 7:44 am

I like number 16 – Hatbox. I don’t know why, but it appeals to me. I think it’s because the grid-design makes it easy to read, but then again it’s designed so you barely notice the grid. Good job! I like the site. Grid-designs are hard to get to work, but most of these sites have done it with success.

Reply

Retroscifigeek November 28, 2010 at 10:39 pm

Ladies and gentleman I present to you my grid style. For me it was the only choice for what my website was all about. The traditional blog format is so clichéd that I hated it.

Reply

cameron September 16, 2013 at 7:23 pm

I like grid style 32 a good design and clean for a website. i have used
used this style quite a bit for my websites.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

{ 5 trackbacks }

Previous post:

Next post:


Web Analytics