Using CSS layout templates when building a website can help you decide how your site’s structure will look like. There are tons of different ways to build HTML templates with different CSS properties, such as Float, Flexbox, Grid, Columns, etc. But before starting implementing, it’s always good to check out the browser compatability for each property.
So if you want to get started and build a layout, a great place for examples is CodePen. Bellow you will find a list I put together with some of the best CSS layouts templates you can find there.
Responsive Pure CSS Masonry Layout – Column Count
Responsive column masonry layout with CSS column count.
See the Pen Responsive Pure CSS Masonry Layout – Column Count by ramenhog (@ramenhog) on CodePen.
Holy Grail Grid System
Responsive grid based Holy Grail layout. Resize the window to see the magic!
See the Pen Holy Grail Grid System by bunnyhawk (@bunnyhawk) on CodePen.
Newspaper Layout using CSS Columns
This is a newspaper layout using CSS columns, based on LA Noire, a game by Rockstar Games.
See the Pen Newspaper Layout using CSS Columns by michaelgearon (@michaelgearon) on CodePen.
CSS Flexbox Layouts
A website layout template made using CSS Flexbox.
See the Pen CSS Flexbox Layouts by tonoarnau (@tonoarnau) on CodePen.
Fluid Grid Blocks | Responsive CSS Layout
A responsive CSS grid that collapses to full width single column.
See the Pen Fluid Grid Blocks | Responsive CSS Layout by nChaco (@nChaco) on CodePen.
Practice: HTML/CSS Layout
An HTML & CSS layout practice for fluid websites.
See the Pen Practice: HTML/CSS Layout by jonmat (@jonmat) on CodePen.
CSS Layout Practice
A cool CSS layout example using Haml and Mixins for sizes.
See the Pen CSS Layout Practice by waxter013 (@waxter013) on CodePen.
CSS Layouts With The Float Property
This is one example for realizing CSS layouts with the Float property.
See the Pen CSS Layouts With The Float Property by plakadiva (@plakadiva) on CodePen.
CSS Grid Template
A simple and neat CSS grid template using the CSS3 property “display:grid”;
See the Pen CSS Grid Template by BedeProgramistka (@BedeProgramistka) on CodePen.
CSS Grid Layout
A useful CSS layout template using a grid and a quite decent number of blocks of different sizes.
See the Pen CSS Grid Layout by 4rontender (@4rontender) on CodePen.
The New CSS Layout – Scratchpad
Typing out examples as I read through the book to help me internalize what I’m reading.
See the Pen The New CSS Layout – Scratchpad by tylergaw (@tylergaw) on CodePen.
How to Design a CSS Layout
Simple tutorial on how to design a CSS layout.
See the Pen How to Design a CSS Layout by neopeaks (@neopeaks) on CodePen.
Welcome Screen Using Flexbox and Viewport Units
Fun with the modern CSS layout depicting fluid resizings using flexbox and viewports.
See the Pen Welcome Screen Using Flexbox and Viewport Units by drew_mc (@drew_mc) on CodePen.
Treehouse CSS Layout Techniques – Display Modes
Treehouse CSS layout techniques using display modes.
See the Pen Treehouse CSS Layout Techniques – Display Modes by balajisr (@balajisr) on CodePen.
Simple Layout Grid
Experimenting with CSS Layout Grid to build a basic 12-column grid system.
See the Pen Simple Layout Grid by timknight (@timknight) on CodePen.
CSS Flexbox Layout – Full Example
A flexible CSS layout example using Flexbox property.
See the Pen CSS Flexbox Layout – Full Example by kyorosweb (@kyorosweb) on CodePen.
Multi-column CSS Layout
A multi-column CSS layout using Column property.
See the Pen Multi-column CSS Layout by workfunc (@workfunc) on CodePen.
