the-grid

vpusher

by SlashBunny

HTML

<base href="https://raw-dot-custom-elements.appspot.com/vpusher/the-grid/v1.3.0/the-grid/">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="the-grid.html">
<style>
  the-grid > div {
    background: #ff4d43;
    opacity: 0.9;
    color: white;
    cursor: move;
    overflow: hidden;
  }
  
  the-grid > div[placeholder] {
    background: #afafaf;
  }
  
  the-grid [resize] {
    position: absolute;
  }
  
  the-grid [resize="bottom-right"] {
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
  }
  
  the-grid [resize="bottom-left"] {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
  }
  
  the-grid [resize="top-right"] {
    top: 0;
    right: 0;
    cursor: nesw-resize;
  }
  
  the-grid [resize="top-left"] {
    top: 0;
    left: 0;
    cursor: nwse-resize;
  }
  
  the-grid [resize="left"] {
    top: 50%;
    left: 0;
    cursor: ew-resize;
    margin-top: -10px;
  }
  
  the-grid [resize="top"] {
    top: 0%;
    width: 100%;
    text-align: center;
    cursor: ns-resize;
  }
  
  the-grid [resize="right"] {
    top: 50%;
    right: 0;
    cursor: ew-resize;
    margin-top: -10px;
  }
  
  the-grid [resize="bottom"] {
    bottom: 0;
    width: 100%;
    text-align: center;
    cursor: ns-resize;
  }

</style>
<the-grid draggable resizable animated col-count="6" row-count="4" cell-margin="10">
  <div class="tile" col="0" row="0" height="1" width="4">
    <span resize="right">│</span>
  </div>
  <div class="tile" col="0" row="1" height="3" width="1">
    <span resize="top">─</span>
  </div>

  <div class="tile" col="4" row="3" height="1" width="1">
    <span resize="top-right">┐</span>
  </div>

  <div class="tile" col="4" row="0" height="2" width="2">
    <span resize="bottom-left">└</span>
  </div>
  <div class="tile" col="2" row="2" height="2" width="2">
    <span resize="left">│</span>
    <span resize="right">│</span>
    <span resize="top">─</span>
    <span resize="bottom">─</span>
    <span...