Design & UX
Article
By Tara Hornor

450+ CSS Layouts

By Tara Hornor
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

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.

--ADVERTISEMENT--

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.


More:
Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?