As a web developer you eventually get to a point when you notice every single website you work on starts off with the same basic concept. A template if you will.  Of-course since you are a good web developer you are always looking to be able to do more in less time – and with that comes this list of free online layout generators.

I have tried to express which generator supports how many columns, as well as which have the more advanced options and which do not. If there are any you feel I missed please feel free to add them in the comments and I will make sure to update the list.

CSS Creator – The CSS Layout Generator was first released by Tony Aslett in October 2003, since then over 871,000 layouts have been generated. Updated in November 2010, HTML5 doctype can now be selected and a simple HTML5 template with appropriate tags will be created. Other HTML and XHTML doctypes are still available. The generator helps you create the structure of your website template using valid HTML and CSS. You can 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. CSS Creator can generate a 1-column, 2-column or 3-column layout.

Firdamatic – Firdmatic 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. It allows to generate either a 2-column or a 3-column layout.

MakeTemplate CSS Generator – This HTML – CSS template generator yields a three column layout without using any Tables.

CSSPortal Layout Generator – 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.

Little Boxes Generator – Little Boxes offers you several “templates” to choose from, whether it be 1, 2 or a 3-column design. Fluid, centered or absolute.

ClevaTreva Designs Generator – A fully featured CSS layout generator able to generator 1-column, 2-column and 3-column layouts. More advanced settings are available via this generator such as intrusion settings.

WebTemplate Generator – The WebTemplate Generator is capable of generating 1-column, 2-column and 3-column layouts – along with font settings, backround colors, padding, borders, text alignment, and much more.

PageColumn Layout Generator – The PageColumn generators are capable of generating 1-5 column grid layouts with CSS 2.0 techniques using %, px, or em.

Templatr Generator – The Templater generator is capable of generating 2 or 3 column layouts complete with in-depth CSS styling for all possible options, such as search forms and login forms.

GenerateIT Layout Generator – 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.

Construct Generator – Construct is a visual layout editor based on Blueprint & jQuery! Create your layout by simply adding columns and containers with a single click.

CodeFuture Layout Generator – The CodeFuture Layout generator will help you to create a css page layout, with up to 3 columns and with header, menu and footer bars. A simple and quick generator. It however lacks options for font settings and other advanced options.

Published by Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Join the Conversation

13 Comments

  1. I needed information regarding the CSSPortal Generators and this is so much more than I needed.  Not complaining— please take that as a compliment.  I have also bookmarked this!

  2. Wow great info here.  I didn’t know CSS Creator can generate a 1-column, 2-column or 3-column layout.  I plan to spend more time here. 

  3. Will be back to this site for more.  I am always looking for a place for information.  I am not in class anymore, but am a self taught web developer.  This is perfect for me. 

    1. @twitter-8773632:disqus Actually these CSS generators did help out with the original layout of @RapidPurple:twitter 

  4. I have been trying to redesign my site layout for some time… so I’m sure these will come in handy. Nice, long list and lots to pick from. Thanks for taking the time to review each one… it sure takes a load of us 🙂

Leave a comment

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