GridStack

by zerrax

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack-extra.css">
<div class="section darkblue">
  <div class="grid-stack darkblue" data-gs-animate="yes">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="6">
      <div class="grid-stack-item-content">1</div>
    </div>
    <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="6">
      <div class="grid-stack-item-content coverItemTwo">2</div>
    </div>
    <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="4" data-gs-height="6">
      <div class="grid-stack-item-content coverItemOne">
        3
      </div>
    </div>
  </div>
</div>

CSS

.grid-stack-item-content {
  background: white;
  color: #2c3e50;
  font-family: 'Indie Flower', cursive;
  text-align: center;
  font-size: 20px;
}

.grid-stack-item-content .fa {
  font-size: 64px;
  display: block;
  margin: 20px 0 10px;
}

header a,
header a:hover {
  color: #fff;
}

.darkblue {
  background: #2c3e50;
  color: #fff;
}

.section {
  padding: 20px;
}

.darkblue hr.star-light::after {
  background-color: #2c3e50;
}

JavaScript

$(function() {
    $('.grid-stack').gridstack({
      width: 12,
      cellHeight: 40,
      alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    });
  });
  
  window.setTimeout(function(){$("#toload").html('4')}, 5000)