Create & Download a bundle!

34Grid downloaded 17024 times, it's your turn! No it is not, it has been retired!

Use customization options to create your own bundle. You' ve four options defined in options section below. If you're not familiar with grid systems, before you dive in, move around page for better understanding.

After you download 34Grid bundle, you'll have a zip file. It includes 2 folders named "css" and "demo". "demo" folder contains a simple "layout.html" page which shows possible column setups for columns and complements. "css" folder is your project file. Move this folder (or its contents) to your project to start using 34Grid. "css" folder has 2 files, one for columns, complements and necessary styles for whole system and the other for media queries.

34 Grid System seem so ugly when you just consider "layout.html". Don't panic! It’s just a scheme for selecting appropriate columns for your project layout. In a real design we won’t use both 1,2,3,4,5,6,7, ... columns together and ordered like "layout.html". We often choose 1,2,3 and 4 columns and use them as layout. So, don’t panic. @see sample pages below. @see layout.html for this page.

There is also a width preview calculator you have in the form. ("toggle calculator" link) A percent-pixel conversion table to preview 960px, 480px, 320px widths of selected values. (click "a little help" link to see dividableBy, margin, rowMargin in action)