---
title: Layout grid
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/layout-grid/layout-grid.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/layout-grid/layout-grid.js"></script>
  {{/content}}


  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header">
        <h1 class="page-title">Layout grid</h1>
        <p class="page-description"></p>
        <div class="page-header-actions">
          <a class="btn btn-sm btn-inverse btn-round" href="http://clippings.github.io/layout-grid/"
            target="_blank">
        <i class="icon md-link" aria-hidden="true"></i>
        <span class="hidden-sm-down">Official Website</span>
      </a>
        </div>
      </div>
      <!-- Page Content -->
      <div class="page-content">
        <!-- Panel Quick example -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Quick Example
              <span class="panel-desc">Static responsive grid with pure css. Javascript using native drag-n-drop
                to reorder for each screen size on desktop and mobile.</span>
            </h3>
          </div>
          <div class="panel-body">
            <!-- Example Layout grid -->
            <div data-arrange="lt-grid" class="lt-container
                  lt-xs-h-9
                  lt-sm-h-6
                  lt-md-h-4
                  lt-lg-h-3">
              <div draggable="true" class="lt
                  lt-xs-x-0
                  lt-xs-y-0
                  lt-xs-w-1
                  lt-xs-h-1
                  lt-sm-x-0
                  lt-sm-y-0
                  lt-sm-w-1
                  lt-sm-h-1
                  lt-md-x-0
                  lt-md-y-0
                  lt-md-w-1
                  lt-md-h-1
                  lt-lg-x-0
                  lt-lg-y-0
                  lt-lg-w-1
                  lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>1</h3>
                </div>
              </div>
              <div draggable="true" class="lt
                  lt-xs-x-0
                  lt-xs-y-1
                  lt-xs-w-1
                  lt-xs-h-2
                  lt-sm-x-1
                  lt-sm-y-0
                  lt-sm-w-1
                  lt-sm-h-2
                  lt-md-x-2
                  lt-md-y-0
                  lt-md-w-1
                  lt-md-h-2
                  lt-lg-x-1
                  lt-lg-y-0
                  lt-lg-w-1
                  lt-lg-h-2">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>2</h3>
                </div>
              </div>
              <div draggable="true" class="lt
                  lt-xs-x-0
                  lt-xs-y-3
                  lt-xs-w-1
                  lt-xs-h-1
                  lt-sm-x-0
                  lt-sm-y-1
                  lt-sm-w-1
                  lt-sm-h-1
                  lt-md-x-1
                  lt-md-y-0
                  lt-md-w-1
                  lt-md-h-1
                  lt-lg-x-0
                  lt-lg-y-1
                  lt-lg-w-1
                  lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>3</h3>
                </div>
              </div>
              <div draggable="true" class="lt
                  lt-xs-x-0
                  lt-xs-y-4
                  lt-xs-w-1
                  lt-xs-h-2
                  lt-sm-x-0
                  lt-sm-y-2
                  lt-sm-w-2
                  lt-sm-h-2
                  lt-md-x-0
                  lt-md-y-1
                  lt-md-w-2
                  lt-md-h-2
                  lt-lg-x-2
                  lt-lg-y-0
                  lt-lg-w-2
                  lt-lg-h-2">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>4</h3>
                </div>
              </div>
              <div draggable="true" class="lt
                  lt-xs-x-0
                  lt-xs-y-6
                  lt-xs-w-1
                  lt-xs-h-1
                  lt-sm-x-0
                  lt-sm-y-4
                  lt-sm-w-1
                  lt-sm-h-1
                  lt-md-x-2
                  lt-md-y-2
                  lt-md-w-1
                  lt-md-h-1
                  lt-lg-x-0
                  lt-lg-y-2
                  lt-lg-w-1
                  lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>5</h3>
                </div>
              </div>
              <div draggable="true" class="lt
                  lt-xs-x-0
                  lt-xs-y-7
                  lt-xs-w-1
                  lt-xs-h-1
                  lt-sm-x-0
                  lt-sm-y-5
                  lt-sm-w-2
                  lt-sm-h-1
                  lt-md-x-1
                  lt-md-y-3
                  lt-md-w-2
                  lt-md-h-1
                  lt-lg-x-1
                  lt-lg-y-2
                  lt-lg-w-2
                  lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>6</h3>
                </div>
              </div>
              <div draggable="true" class="lt
                  lt-xs-x-0
                  lt-xs-y-8
                  lt-xs-w-1
                  lt-xs-h-1
                  lt-sm-x-1
                  lt-sm-y-4
                  lt-sm-w-1
                  lt-sm-h-1
                  lt-md-x-0
                  lt-md-y-3
                  lt-md-w-1
                  lt-md-h-1
                  lt-lg-x-3
                  lt-lg-y-2
                  lt-lg-w-1
                  lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>7</h3>
                </div>
              </div>
            </div>
            <!-- End Example Layout grid -->
          </div>
        </div>
        <!-- End Panel Quick example -->
        <!-- Panel Static example -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Static example
              <span class="panel-desc">A static example without any javascript. Just a responsive grid.</span>
            </h3>
          </div>
          <div class="panel-body">
            <!-- Example Layout grid -->
            <div class="lt-container
            lt-xs-h-18
            lt-sm-h-12
            lt-md-h-8
            lt-lg-h-6">

              <div class="lt
              lt-xs-x-0
              lt-xs-y-0
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-0
              lt-sm-y-0
              lt-sm-w-1
              lt-sm-h-1
              lt-md-x-0
              lt-md-y-0
              lt-md-w-1
              lt-md-h-1
              lt-lg-x-0
              lt-lg-y-0
              lt-lg-w-1
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>1</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-1
              lt-xs-w-1
              lt-xs-h-2
              lt-sm-x-1
              lt-sm-y-0
              lt-sm-w-1
              lt-sm-h-2
              lt-md-x-2
              lt-md-y-0
              lt-md-w-1
              lt-md-h-2
              lt-lg-x-1
              lt-lg-y-0
              lt-lg-w-1
              lt-lg-h-2">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>2</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-3
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-0
              lt-sm-y-1
              lt-sm-w-1
              lt-sm-h-1
              lt-md-x-1
              lt-md-y-0
              lt-md-w-1
              lt-md-h-1
              lt-lg-x-0
              lt-lg-y-1
              lt-lg-w-1
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>3</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-4
              lt-xs-w-1
              lt-xs-h-2
              lt-sm-x-0
              lt-sm-y-2
              lt-sm-w-2
              lt-sm-h-2
              lt-md-x-0
              lt-md-y-1
              lt-md-w-2
              lt-md-h-2
              lt-lg-x-2
              lt-lg-y-0
              lt-lg-w-2
              lt-lg-h-2">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>4</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-6
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-0
              lt-sm-y-4
              lt-sm-w-1
              lt-sm-h-1
              lt-md-x-2
              lt-md-y-2
              lt-md-w-1
              lt-md-h-1
              lt-lg-x-0
              lt-lg-y-2
              lt-lg-w-1
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>5</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-7
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-0
              lt-sm-y-5
              lt-sm-w-2
              lt-sm-h-1
              lt-md-x-1
              lt-md-y-3
              lt-md-w-2
              lt-md-h-1
              lt-lg-x-1
              lt-lg-y-2
              lt-lg-w-2
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>6</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-8
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-0
              lt-sm-y-6
              lt-sm-w-2
              lt-sm-h-1
              lt-md-x-0
              lt-md-y-4
              lt-md-w-2
              lt-md-h-1
              lt-lg-x-0
              lt-lg-y-3
              lt-lg-w-2
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>7</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-9
              lt-xs-w-1
              lt-xs-h-2
              lt-sm-x-0
              lt-sm-y-7
              lt-sm-w-1
              lt-sm-h-2
              lt-md-x-2
              lt-md-y-4
              lt-md-w-1
              lt-md-h-2
              lt-lg-x-3
              lt-lg-y-3
              lt-lg-w-1
              lt-lg-h-2">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>8</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-11
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-1
              lt-sm-y-7
              lt-sm-w-1
              lt-sm-h-1
              lt-md-x-0
              lt-md-y-5
              lt-md-w-1
              lt-md-h-1
              lt-lg-x-2
              lt-lg-y-3
              lt-lg-w-1
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>9</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-12
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-1
              lt-sm-y-8
              lt-sm-w-1
              lt-sm-h-1
              lt-md-x-1
              lt-md-y-5
              lt-md-w-1
              lt-md-h-1
              lt-lg-x-0
              lt-lg-y-4
              lt-lg-w-1
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>10</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-13
              lt-xs-w-1
              lt-xs-h-2
              lt-sm-x-0
              lt-sm-y-9
              lt-sm-w-2
              lt-sm-h-2
              lt-md-x-1
              lt-md-y-6
              lt-md-w-2
              lt-md-h-2
              lt-lg-x-1
              lt-lg-y-4
              lt-lg-w-2
              lt-lg-h-2">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>11</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-15
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-0
              lt-sm-y-11
              lt-sm-w-1
              lt-sm-h-1
              lt-md-x-0
              lt-md-y-6
              lt-md-w-1
              lt-md-h-1
              lt-lg-x-0
              lt-lg-y-5
              lt-lg-w-1
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>12</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-16
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-1
              lt-sm-y-4
              lt-sm-w-1
              lt-sm-h-1
              lt-md-x-0
              lt-md-y-3
              lt-md-w-1
              lt-md-h-1
              lt-lg-x-3
              lt-lg-y-2
              lt-lg-w-1
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>13</h3>
                </div>
              </div>
              <div class="lt
              lt-xs-x-0
              lt-xs-y-17
              lt-xs-w-1
              lt-xs-h-1
              lt-sm-x-1
              lt-sm-y-11
              lt-sm-w-1
              lt-sm-h-1
              lt-md-x-0
              lt-md-y-7
              lt-md-w-1
              lt-md-h-1
              lt-lg-x-3
              lt-lg-y-5
              lt-lg-w-1
              lt-lg-h-1">
                <div class="lt-body bg-primary-100 text-center p-20">
                  <h3>14</h3>
                </div>
              </div>
            </div>
            <!-- End Example Layout grid -->
          </div>
        </div>
        <!-- End Panel Static example -->
      </div>
      <!-- End Page Content -->
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}