CSSでグリッド（碁盤目）レイアウトを実現する方法です。

Floatを使ったグリッドレイアウト

元祖です。Twitter社がBootstrapというサイト開発用で用いられていました。

ポイントはグリッドの個々のアイテムを下降コンテナにマイナスのマージンを含める点です。

グリッドレイアウト：HTML

<div class="grid-container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

グリッドレイアウト：CSS

.grid-container{
  margim-right:-1%;
  margim-left:-1%;
  overflow:hidden;
  width:auto;
}
.grid-container > .item{
  float:left;
  margin:30px 1%
  width:48%;
  height:100px
}

グリッドレイアウト亜種：CSS

上記は２カラムですが、３カラム、４カラム、亜種の作成が容易です。HTMLにクラスを追加する形で、上書きできます。CSSの優先度は「Specificity（どのくらい限定的か）」にもとづきます。

複合クラスでスタイルが指定されれば、一つのクラスによるスタイル指定を上書きできます。

<style>
.grid-container.column-3 > .item{
   width:31.3333%;
}

.grid-container.column-4 > .item{
  width:23%;
}
.grid-container.column-5 > .item{
  width:18%;
}
</style>

以上、CSSのグリッドレイアウトについてでした。