Proton

Grid

Proton's grid comprises twelve fluid columns with fixed, 20-pixel gutters. Each column is 8.333% of the total container width (100% รท 12).

The gutters are produced with padding on the columns; 10 pixels of padding inside adjacent columns gives 20 pixels of space between column contents. This only works in browsers that support border-box and breaks horribly in older browsers with the standard box model. This is unshippable.

One

Two

Three

Four

Five

Six

Seven

Eight

Nine

Ten

Eleven

Twelve

Column Spans

Six

Three

Three


Two

Eight

Two


Four

Four

Four

One

Eleven

Two

Ten

Three

Nine

Four

Eight

Five

Seven

Six

Six

Seven

Five

Eight

Four

Nine

Three

Ten

Two

Eleven

One