グリッドレイアウトについて
ウェブ制作でよく使う手法として「Grid Layout（グリッドレイアウト）」というものがあります。
これに関して存外情報が少ないので、自分で調べたもの、自分で実践していることをまとめておこうと思います。
「Grid（グリッド）」は格子のという意味です。
モジュールという場合と、カラムという場合があるようですが、左右に余白を持ったそれを敷き詰めます。
ウェブの場合、12カラムか16カラムが主流のようです。
これを4：4：4（=12）や3：3：3：3（=12）、4：4：4：4（=16）やといった具合に束ねてレイアウトします。
カラムを束ねたものをユニットと呼ぶそうです。
4：4：4の場合は3ユニットということになります。
DTPの場合は4ユニットなども見かけますが、ウェブの場合は多くて3ユニットでしょう。
960 Grid Systemというサイトがあります。
横幅を960pxで固定した、12カラムと16カラムの2パターンのグリッドシステムを紹介しています。
サンプルが見られます。
このサイトのシステムの場合、左右に10pxの余白を設けたカラムを敷き詰める手法をとっています。
12カラムの場合は1カラムが60px、16カラムの場合は1カラム40pxです。
いずれもキリの良い偶数となるので使いやすいと思います。
矢野りん氏の著書「WEBデザインメソッド-伝わるコンテンツのための理論と実践
サブカラムは、カラムの中心に「左右の余白と同じ幅」の要素を設置した後に出来る左右のスペースのことを指しています。
カラムを2分割するケースが出てきた際の指標といったところでしょうか。
冷静に考えると24カラム敷き詰めたのと同じことですね。
他のグリッドレイアウトに関する記事で「サブカラム」という表現を見たことがないのは、つまりそういうことなのでしょう。
矢野りん氏のグリッドシステムを参考に自分なりのグリッドシステムを作ってみました。
左右の余白は8pxです。
カラムとカラムの間は16pxになります。
ブラウザのfont-size: 100%が16px相当なので、それに合わせました。
基本の文字サイズが16pxはちょっと大きい気もしますが…。
矢野りん氏が著書の中で紹介しているグリッドシステムは左右の余白が7pxです。
フォントサイズ14pxを想定し、カラムとカラムの間の余白をフォント1文字分にしたのだと勝手に思っています。
7pxだとキリが悪いので僕は8pxに。
12カラムの場合、1カラムは64pxです。
12カラム（ 64 x 12 ） + 余白｛ （8px x 2 ） x 12 ｝ ＝ 960px
となります。
960 Grid Systemと比較するとカラムとカラムの間が狭い気がします。
縦糸だけではグリッドになりません。
横糸はどうしよう。
これについては個人的には難しいと思います。
縦並びのナビゲーションメニューの場合は高さが固定できそうですが、ユニットの中に納まる各要素（ボックスと表現されていますが）の高さは可変であると想定すべきでしょう。
僕は文字サイズを基準にするのが良いのではないかと思います。
これは「Web Designing ( ウェブデザイニング ) 2010年 04月号 [雑誌]
例えばCSSでbody{font-size: 100%}とした際にはそのサイトの基本フォントサイズは16pxになります。
その際、一般的に｛line-height: 1.5em｝も指定していると思います。
その場合、16 x 1.5 = 24pxとなります。
これを横糸の最小単位と考えます。
余談ですが、よく大学ノートのような横罫線を表現を試みるも、文字と線がずれて重なっているサイトを目にします。
これは、
{
font-size: 100%;
line-height: 24px（1.5emと同等）
}
と行の高さに実数を指定し、間隔23px+ボーダー1pxの画像をCSSで敷き詰めることで実現できます。
間隔24px+ボーダー1pxとすると、1行ごとに1pxずつずれてしまいます。
行の高さを実数で固定してしまうことには抵抗があるかもしれません。
しかし、仮に24pxで固定した場合、文字サイズを「最大」にしても、上の行と下の行の文字が重なることはありません。
綺麗にテキストに罫線をしきたい場合は上記の方法で。