---

title: Layout modes

layout: default

category: demos

---

  <section id="copy">

    <p>Isotope has a versatile layout engine that can accommodate multiple layout modes. Vertical layouts react to changes in browser width. Horizontal layouts react to browser height.</p>

    <p>See <a href="../docs/layout-modes.html">docs on layout modes</a>.</p>

  </section>

  <section id="options" class="clearfix">

    {% include layout-options.html %}

  </section> <!-- #options -->

  <div id="container" class="variable-sizes clearfix">

    {% for element in site.elements limit:20 %}

      {% include element-partial.html %}

    {% endfor %}

  </div> <!-- #container -->

  <script src="../{{ site.jquery_js }}"></script>

  <script src="../{{ site.isotope_js }}"></script>

  <script>

    $(function(){

      var $container = $('#container');

      {% include random-sizes.js %}

      $container.isotope({

        itemSelector : '.element',

        masonry : {

          columnWidth : 120

        },

        masonryHorizontal : {

          rowHeight: 120

        },

        cellsByRow : {

          columnWidth : 240,

          rowHeight : 240

        },

        cellsByColumn : {

          columnWidth : 240,

          rowHeight : 240

        }

      });

      {% include layout-change.js %}

      {% include option-set-buttons.js %}

    });

  </script>