18grid

18-Column Fluid CSS Grid System

What is 18grid?

18grid is an 18-column fluid CSS grid. It is a tool for building responsive layouts quickly, easily, and with minimal effort. You don't need to worry about rearranging and resizing your layout for different screen sizes; 18grid does this for you automatically.

18grid is a percentage-based grid system, which means that it will adapt to all screen resolutions, from mobile all the way to widescreen monitors. 18grid is designed to take advantage of the full screen real estate available on large widescreen monitors, while still looking great on small mobile device screens.

For better understanding of how 18grid works, please have a look at the grid reference.

Why 18grid?

other grids waste screen space

Other grid systems (like 960 grids) waste valuable screen space on large monitors. 18grid is designed to take advantage of all available screen real estate, even on large monitors.

Time for some math:

we have 18 columns

for 18 columns we need 17 margins

so if we count margin 2%, then 2% * 17 margins = 34%

and if we count width of 1 column 3.66%, than 3.66% * 18 columns = 66%

in the end we have 34% + 66% = 100%!

Code explanation

.container18grid
Main wrapper for the whole page. It is centered horizontally by default.

.onerow
Clearing wrapper for each separate row.

.col1 - .col18
Classes that determine how many columns an element should span, from one to eighteen. They can be combined with .onerow up to eighteen.

.left1 - .left18
Push columns to the right by a given number of columns.

.last
Must be added to the last column of each row. It removes the margin-right from the last element.

HTML example

<div class="container18grid">

<div class="onerow">
<div class="col6">Six Columns Wide</div>
<div class="col6">Six Columns Wide</div>
<div class="col6 last">Six Columns Wide</div>
</div>

<div class="onerow">
<div class="col3 left2">Three Columns Wide, Moved Right Two Columns</div>
<div class="col10">Ten Columns Wide</div>
<div class="col3 last">Three Columns Wide</div>
</div>

</div>