いわゆるFlexibleBoxとかFlexBoxとか呼ばれてるみたいなんですが、こちらまだ実践で使ったことがないので、試しに使ってみました。

こちらはcss3なので最新のブラウザしか対応してなくて、IE９ですら対応してないようなので、実践には向かないかと思います。

こちらはその名の通り、レイアウトをフレキシブルにできるもので、今までカラムをfloatを使っていたものをこちらのプロパティでできるというものです。
考え方としてはtableと似てると思います。

CSS Flexible Box Layout Module Level 1

とりあえずデモがありますのでそちらをご覧ください。

グロナビと、メインビジュアル下のコンテンツに使用しています。

DEMO

htmlは以下のようになります。

これに対してcssは、

親要素にdisplay: flex;を設定するだけで横並びレイアウトが簡単にできます！
あとは、justify-contentやflexの値を変更すると、幅や余白の調整ができます。

ちなみに、justify-contentのプロパティとイメージは以下になります。

参照：CSS Flexible Box Layout Module Level 1

もっと複雑かつ細かく設定できるのですが、本記事ではここまでとさせていただきます。
横並びだけでなく、縦の並びもできるようで、縦中央や縦均等で並べたり、今までなかなかできなかったことが簡単にできるようにもなります。

その辺はまたいずれご説明したいと思います。