グリッドレイアウトを実装するJavaScriptライブラリMasonryの使い方

投稿日：2020年8月23日

こんにちは、今日はWebサイトにグリッドレイアウトを実装することができるJavaScriptライブラリ、Masonryの使い方についてまとめていきます。

公式サイト

https://masonry.desandro.com/

サンプルコード

CDNからライブラリの読み込みを行なっているため、以下のコードで動作が確認できます。
こちらのサンプルではjQueryも使用しています。

公式サイトにもいくつかサンプルがあり、そちらとほぼ同じものです。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Language" content="ja">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Masonryテスト</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
    <style>
      * { box-sizing: border-box; }
      body { font-family: sans-serif; }
      .grid {
        background: #EEE;
        max-width: 1200px;
      }

      .grid-item {
        width: 160px;
        height: 120px;
        float: left;
        background: #D26;
        border: 2px solid #333;
        border-color: hsla(0, 0%, 0%, 0.5);
        border-radius: 5px;
      }

      .grid-item--width2 { width: 320px; }
      .grid-item--width3 { width: 480px; }
      .grid-item--width4 { width: 640px; }

      .grid-item--height2 { height: 200px; }
      .grid-item--height3 { height: 260px; }
      .grid-item--height4 { height: 360px; }
    </style>
  </head>
  <body>
    <div class="grid">
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height2"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width3"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item grid-item--width2 grid-item--height3"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--width2 grid-item--height2"></div>
      <div class="grid-item grid-item--width2"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height3"></div>
      <div class="grid-item grid-item--height2"></div>
      <div class="grid-item"></div>
      <div class="grid-item"></div>
      <div class="grid-item grid-item--height2"></div>
    </div>

    <script>
      $('.grid').masonry({
        itemSelector: '.grid-item'
      });
    </script>
  </body>
</html>