レスポンシブデザインでコーディングする時って、横３列とか４列とかでボックスを並べると思いますが、正直計算して並べるのって、面倒だと思いません？

最近のブラウザで使えるCSS3では何と計算ができます！

普通レスポンシブで横３列に並べる時って、

.col3{
width:33.3333%;
}

こんな感じですよね。
ここにさらにボックスの両端を10pxずつmarginをあけたい時ってどうしますか？
【width:33.3333%-20px】とかできたら最高ですよね！

そこで使えるのが、【calc】です。

.col3{
width:calc(100%/3-20px);
}

こんな便利な指定ができます！かなり便利です。

ただ、未だに使っている人が多いらしい【AndroidOS 4.2】などは対応していません。もちろんIE8も。まあいつものことですが。
Webkitの指定などもしておいた方がいいですね。
Webkitの指定を入れると、

.col3{
width:-webkit-calc(100%/3-20px);
width:calc(100%/3-20px);
}

こんな感じです。