10 Useful and Time-Saving CSS Grid-Layout Generators
CSS is considered the “back-bone” of a website. It structures, helps embed, and styles elements. Now, if we were to code a CSS layout by hand, it would take us an unneeded amount of time that we could be putting towards other areas of our designs.
With somewhat similar concepts to the all-famous button, background, and favicon generators, today we present you with 10 Useful and Time-Saving CSS Grid-Layout Generators that will save you mass amounts of time and help you eliminate some repetitive coding.
Blueprint Grid CSS Generator
This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.
Grid Layout Generator by netProtozo
The Grid Layout Generator by netProtozo is very easy to use. You can use the form to build a grid, then be able to grab the generated CSS to use in building your layout. Also, use a snap shot of the grid in photoshop to help you tighten up your design. By doing so, you’ll find that you’ll be able to pretty much match your design using the CSS provided.
Grid System Generator
The grid system generator will create fixed grid systems in valid CSS/XHMTL form for rapid prototyping, development, and production environments. It also creates a background file that you can use in Frameworks, Illustrator, Photoshop, and more to aid in prototyping and design.
YUI: CSS Grid Builder
Yahoo’s grid builder is one of the easiest to interact with. The side panel to the left lets you edit the width of the grid, create columns, rows, and set fixed sizes. The changes you make take place in HTML format and you can hit the Show Code button and copy/paste it wherever you’d like.
Variable Grid System
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.
YAML Builder
The YAML Builder is a tool for visually creating YAML-based CSS layouts. It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creation of grid-based layouts by dragging and dropping subtemplates. Not quite WYSIWYG, but close!
Grid Designer
You can get started generating grids by Filling in the number of columns, total width, gutters and margin widths, all specified in pixels – then press the design button. You can even use the Typography tab to adjust and calculate basic typographic settings for your design. Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.
CSS Layout Generator by CSSPortal
This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.
Firdamatic
Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze. This tool is available for free for personal/non-commercial use only and comes with no technical support.
CSSCreator.com
This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages. To create your layout select the structural elements your site requires (header, footer, columns). Then specify a size in the field provided and choose a background color from the color chooser below.
via http://www.reencoded.com/2010/03/02/10-useful-and-time-saving-css-grid-layout-generators/
