グリッドレイアウトの実装

こんにちは！kossyです！

今日はたまには技術的なことを

ブログに残してみようかと思いますー

最近買った

HTML5 CSS3 モダンコーディング

という本の中で、

グリッドレイアウトを

実装する章があったので、

その導入方法を紹介してみます！

  <script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.js">
  </script>
  <script>
    new Masonry('body', {
      itemSelecter: '.item',  //ボックス要素のセレクタ
      columnWidth: 180,      //グリッドの横幅
      gutter: 4              //左右のボックスとの間隔
    });
  </script>

これでレンガのように
画像が隙間なく敷き詰められます！