Design & UX
By Tara Hornor

450+ CSS Layouts

By Tara Hornor

You need options. Anyone that’s spent time collaborating on web design projects knows that every developer has their own processes — even with best practices being observed there is variation in techniques. So your CSS library should give you more than one way to attack a problem.

Website layouts can be a serious pain, but CSS gives you a great deal of flexibility in how you approach the layout issue. Often the home page needs a grid design while post pages have a three column layout, with other formats for custom pages. With CSS layouts already in place, you can quickly implement a layout and change as needed.

The following is a collection of layout libraries you can add to your own with multi-column static and liquid layouts. Enjoy and let us know which ones you like best!

20+ CSS Layouts by MaxDesign

With excellent markup walk-thrus and the sample CSS on-page, this set of CSS layouts will be easy to see in action and almost as easy to implement.

40 CSS Layouts by Layout Gala

Previews are available for each format and you can even download the entire collection in one file.

250+ Layouts by Free CSS

This is a massive list with just about every layout imaginable. Preview and click again to download. The CSS is stripped down so there’s lots of room for tweaking.

50+ Fixed Width Layouts by Code Sucks

Click to preview and click to download. These layouts are simple with nicely developed whitespace. Worth checking out and easy to modify.

10+ Unique CSS Layouts by Intensiv Station

While on the sparse side in terms of the quantity, this collection includes some impressive tricks like floating menus and dynamic centered boxes worth having on hand.

40+ CSS Layouts by Dynamic Drive

This site has organized their CSS layouts by two-column, three column, fixed, liquid, and frames. Each has a nice description and the ability to preview before downloading.

15+ Interesting CSS Layouts by The Noodle Incident

This site has a unique way of guiding you thru the process of picking the layout you want. Follow the arrows, select your design, and download.

Customized Static CSS Grid Generator by Grid Designer

It doesn’t get much easier than this. Just set up the grid you want using the on-page tools and download your template.

Customized Fluid/Variable CSS Grid Generator by Spry Soft

Static not good enough for ya?! No problem. Fluid/variable grids are easy to make with this site.

  • Thanks for sharing. Please add responsive layout templates and HTML5 templates also, if available.

  • Great article…

  • What CSS layout are we talking about here, My Space? A normal page?You can get 
    from some layout templates.

  • Blueprint CSS is sorely missing.

  • I delight in, cause I found exactly what I used to be having a look for. You have ended my four day long hunt! God Bless you man. Have a nice day.

  • my classmate’s ex-wife makes $78 every hour on the computer. She has been fired for 5 months but last month her paycheck was $8804 just working on the computer for a few hours. Read about it on this site MakeCash4.

  • Shane

    The links in this article are ancient. Some refer to CSS layouts from 2002. Others talk of IE5 bugs. Even the 960grid is outdated now. 2012 is 3 weeks away! Let’s post some current CSS links in these comments. Thanks.

  • KevanH

    I can only agree with Shane… while these may seem cool, I can not use in reality something that says it works with IE5.5. Many of these links are out of date and shouldn’t be considered for use today.

    I do however appreciate the time you’ve put in Tara.

  • Agree with Shane, maybe the next update can include Boilerplate and some responsive / HTML5 based layout tools.

Get the latest in Design, once a week, for free.