Grid Layouts

Justify Grid

This is another grid system, but it has a unique take on the problem. This might be my favorite grid system. I have created an example on the Justify Grid page.

http://justifygrid.com

It may use the concepts from Text-align: Justify and RWD that talks about evenly spacing items using CSS property text-align: justify.

CSS-Based Grid Layout — CSS Table Cell Columns

I used this type of layout for the Ribbon theme (Drupal site).

CSS-Based Grid Layout — Floated Columns

Adam Kaplan’s Grid example is by far the best explanation of how modern CSS-based grid layouts work where columns are created using Floats. Sitepoint has another good explanation — also using floats.

Concepts

  1. Use mobile-first design paradigm
  2. Use a CSS Reset
    <link rel="stylesheet" href="/css/normalize.css">
  3. Add a viewport meta tag
    <meta name="viewport" content="width=device-width, initial-scale=1">
  4. Use box-sizing: border-box
    *, *:before, *:after {
       -moz-box-sizing: border-box;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
    }
  5. Create a container (a <div>)
    Note: I typically use <body> as my container instead of creating additional markup.
  6. Create content (column) blocks. With mobile first, columns are block level (takes up the full width available) by default. No additional styles needed!
  7. Create columns for larger screens. On larger screens, columns gain float: left in order to stack content horizontally. Columns now use padding for gutters, so you no longer need to worry about removing margins.
    		@media (min-width: 40rem) {
		.column {
		float: left;
		padding-left: 1rem;
		padding-right: 1rem;
		}
		
		.column.full { width: 100%; }
		.column.two-thirds { width: 66.7%; }
		.column.half { width: 50%; }
		.column.third { width: 33.3%; }
		.column.fourth { width: 24.95%; }
		.column.flow-opposite { float: right; }  
		}
  8. Create Rows. Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise known as clearing issues. Rows are cleared using the popular clearfix hack.
  9. Flow Opposite. Add the class .flow-opposite to columns where you want content to display first on mobile but appear on the right on larger screens.

960 Grid Layout

Design Tool

Firstly, designing on a grid system is only one option for laying out a web page, but there are excellent reasons why you should. Six Revisions has an excellent article describing the benefits of using this grid and how to implement it.

If you use Photoshop for your design work, download this template to get started.


grid-960-template.psd.zip

Development Tool

Once you’ve created your killer design in Photoshop and sliced out the assets, it is time to place them on the web page. This can be done with the aid of a pre-build CSS file as described in the Six Revisions article referenced above.