Welcome, guest | Sign In | My Account | Store | Cart

CSS snippet for a 3-column grid. Based on that used for some Apple product pages.

HTML:

<div class="grid3col">
  <div class="column first">
    ...
  </div>
  <div class="column">
    ...
  </div>
  <div class="column last">
    ...
  </div>
</div>

In general, you have to recalculate the widths based on (a) the available full width in your pages and (b) the amount a spacing you want between columns.

CSS, 5 lines
1
2
3
4
5
/* 3-column grid using 840px full width */
.grid3col .column { width: 260px; margin-left: 30px; }
.column { float: left; }
.column.first, .column.last { margin-left: 0 !important; }
.column.last { float: right !important; }
Created by Trent Mick on Wed, 15 Sep 2010 (MIT)
CSS recipes (1)
Trent Mick's recipes (28)

Required Modules

  • (none specified)

Other Information and Tasks