Time Saving Helping Hand: Popular Grid Systems
WMT Section: Webmaster Tips - WMT Category: Web Design Tips

1. The 1Kb CSS Grid

is the lightest grid system of the all, despite of such a tiny weight it includes everything you need to create a sterling website.


2. 1200px Grid System 

helps to create template that will perfectly fit into prevalent widescreen monitors.

1200px Grid System

3. The Semantic Grid System 

allows to set specific sizes for columns and gutters thereby giving opportunity to create custom layout.

The Semantic Grid System

4. Responsive Grid System 

is more than just a simple css framework. It is a full system that can build any website layout for any screen size.

Responsive Grid System

5. Responsive Grid System 

provides adaptive layout that can be divided into grid with 12, 16 or 24 columns.

Responsive Grid System

6. Variable Grid System 

quickly generates grid layout with given parameters. All you need to do is set 3 main parameters and download the result.  

Variable Grid System

7. 1140 CSS Grid System 

primarily relies on widescreen monitors and responsiveness, quickly creates 1140 px wide layout that can be easily adapt to the width of a smaller monitors browsers.

1140 CSS Grid System

8. Golden Grid System 

includes 16 fluid columns that cover any screen sizes from 240 up to 2560 pixels.

Golden Grid System

9. 978 grid system 

is the main rival of a popular 960gs. It has 978px overall width with 30px width  gutters and very easy-to-use div system that creates more distinctive info blocks.

978 grid system

10. 960 grid system 

is undoubtedly the most popular grid system nowadays. It’s time-tested, effective layout with two basic variants: 12 and 16 columns, and one for special occasions that includes 24-column grid .

960 grid system


11. Building a modern grid system 

is a very useful article that includes not only simple grid system but also helpful tutorial that explains how to create your own columned layout.

Building a modern grid system

12. Frameless 

is a  beneficial css framework that is presented in several formats. You can download HTML, PSD, LESS, SCSS templates and build step-by-step website layout.


13. Fluid Baseline Grid 

is a sensible grid system that was primarily designed for mobile devices. The HTML5/CSS3 fluid layout is really easy to work with.

Fluid Baseline Grid

14. The Square Grid 

divides layout into squares that all together form columns and blocks. You will find photoshop, illustrator and, of course, code templates.

The Square Grid

15. Fluid 960 grid system 

is a responsive variation of 960 grid system. You have an opportunity to  build either fixed or fluid templates that can be divided into 12 or 16 columns.  

Fluid 960 grid system

16. Adaptive Grid System 

takes on responsiveness that is must have for every modern website. It has its own division system that will provide you with proportional layout.

Adaptive Grid System

17.Grid Designer 

is a very handy grid system which allows to set whatever you like values on columns, pixels, gutters and margins.

Grid Designer

18. Gridr Buildrrr 

is another good grid builder that will create a specific layout with a preset values.

Gridr Buildrrr

19. Blueprint 

is a popular framework with a great deal of useful development tools, supporting different advanced layouts and providing plugins that help to create a great user interface.


20. Foundation 3 

is a sophisticated and one of the most widely used front-end frameworks. Have been build  both for desktop and mobile devices it includes a huge variety of styles and elements to fully satisfy your needs.

Foundation 3



#1 Franklyn SEO Orlando 2012-12-13 16:59
Great post, it's often hard to find tools like this or at least good tools when you need them. Once again thank you.

Add comment

Security code


Site Map

Write for us!

Do you have any Joomla custom work either on template, component, module or plugin to show off?
Or do you offer free tips and resources for webmasters?

About is a Joomla CMS related portal that publishes authentic Joomla Extensions, tips and resources for webmasters. Follow wmt_joomla on Twitter