Minigrid

インクルード

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/minigrid/2.0.0/minigrid.min.js"></script>

デフォルト

(function(){
  function grid() {
    minigrid({
      container: '.grid', // タイルUIの親要素を指定
      item: '.grid__item', // 子要素を指定
      gutter: 0 // 子要素の間のガターを指定
    });
  }
  // リサイズにも同じ処理をする
  window.addEventListener('resize', function(){
    grid();
  });
  grid();
})();

CSSはfloatなどの指定は必要ない。オプションのgutterがよくわからなかったのと、CSSで管理したほうがいいと思うのでwidthはCSSで指定する。

.grid {
  width: 100%;
  margin: 0 auto;
}

.grid__item {
  width: 100%;
  padding: 1em;
}

@media (min-width: 300px) {
  .item {
    width: 50%;
  }
}

@media (min-width: 600px) {
  .item {
    width:33.3333%;
  }
}

style属性でposition、transform、width、heightが追加される。

CSSでアニメーションを追加する場合はtransformプロパティを対象にする。widthが指定されていると挙動が悪くなる。

.grid__item {
  width: 100%;
  padding: 1em;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.785, 0.135, 0.150, 0.860); 
}

.grid__item--loaded {
  transform: scale(1);
}

transitionプロパティはCeaserを使うといろいろ試せる。