レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか？

レスポンシブWebデザインに使うグリッド・システムには、box-sizing: border-boxがいいんじゃなかろうか？ 可変する（リキッド・レイアウト）グリッド・システムを構築する際の悩みは、計算が面倒なことです。たとえば、12カラムでグリッド間の空き（ガッターサイズ）がグリッドの左右それぞれで14pxのグリッド・システムを作るとします。その際、以下のような計算が必要になります。 12カラム・グリッドのパーセント値の計算 グリッドの基本設定を以下のようにするとします： 12カラムのグリッド・システム 基準となる幅: 1140px ガッターサイズ: 左右各14px まずは1カラムのサイズを計算します。 基準となる幅を12分割 1140px ÷ 12 = 95px そこからpadding（ガッターサイズ）分を引く 95px – 14px * 2 = 71 67px 幅のパーセント値を計算

[o_hiroyuki]

レスポンスwebデザインのカラムの計算方法