gridstack.js/dist/gridstack.min.css

.grid-stack{position:relative}.grid-stack-item{position:absolute;padding:0}.grid-stack-item>.grid-stack-item-content,.grid-stack-item>.placeholder-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0 !important;overflow:auto}.grid-stack-placeholder>.placeholder-content{border:1px dashed lightgray}.grid-stack-item.ui-draggable-dragging,.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,0.2);opacity:.8}:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack-item>.ui-resizable-se{text-align:right;color:gray;padding:2px 3px 0 0;margin:0;display:inline-block;font:normal normal normal 10px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.grid-stack-item>.ui-resizable-se::before{content:"\f065"}.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;left:10px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;right:10px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;right:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px;right:10px;bottom:0}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;left:10px;bottom:0}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;left:10px;top:15px;bottom:15px}.grid-stack-item{min-width:8.33333333%}.grid-stack-item[data-gs-width="12"]{width:100%}.grid-stack-item[data-gs-width="11"]{width:91.66666667%}.grid-stack-item[data-gs-width="10"]{width:83.33333333%}.grid-stack-item[data-gs-width="9"]{width:75%}.grid-stack-item[data-gs-width="8"]{width:66.66666667%}.grid-stack-item[data-gs-width="7"]{width:58.33333333%}.grid-stack-item[data-gs-width="6"]{width:50%}.grid-stack-item[data-gs-width="5"]{width:41.66666667%}.grid-stack-item[data-gs-width="4"]{width:33.33333333%}.grid-stack-item[data-gs-width="3"]{width:25%}.grid-stack-item[data-gs-width="2"]{width:16.66666667%}.grid-stack-item[data-gs-width="1"]{width:8.33333333%}.grid-stack-item[data-gs-min-width="12"]{min-width:100%}.grid-stack-item[data-gs-min-width="11"]{min-width:91.66666667%}.grid-stack-item[data-gs-min-width="10"]{min-width:83.33333333%}.grid-stack-item[data-gs-min-width="9"]{min-width:75%}.grid-stack-item[data-gs-min-width="8"]{min-width:66.66666667%}.grid-stack-item[data-gs-min-width="7"]{min-width:58.33333333%}.grid-stack-item[data-gs-min-width="6"]{min-width:50%}.grid-stack-item[data-gs-min-width="5"]{min-width:41.66666667%}.grid-stack-item[data-gs-min-width="4"]{min-width:33.33333333%}.grid-stack-item[data-gs-min-width="3"]{min-width:25%}.grid-stack-item[data-gs-min-width="2"]{min-width:16.66666667%}.grid-stack-item[data-gs-min-width="1"]{min-width:8.33333333%}.grid-stack-item[data-gs-max-width="12"]{max-width:100%}.grid-stack-item[data-gs-max-width="11"]{max-width:91.66666667%}.grid-stack-item[data-gs-max-width="10"]{max-width:83.33333333%}.grid-stack-item[data-gs-max-width="9"]{max-width:75%}.grid-stack-item[data-gs-max-width="8"]{max-width:66.66666667%}.grid-stack-item[data-gs-max-width="7"]{max-width:58.33333333%}.grid-stack-item[data-gs-max-width="6"]{max-width:50%}.grid-stack-item[data-gs-max-width="5"]{max-width:41.66666667%}.grid-stack-item[data-gs-max-width="4"]{max-width:33.33333333%}.grid-stack-item[data-gs-max-width="3"]{max-width:25%}.grid-stack-item[data-gs-max-width="2"]{max-width:16.66666667%}.grid-stack-item[data-gs-max-width="1"]{max-width:8.33333333%}.grid-stack-item[data-gs-x="12"]{left:100%}.grid-stack-item[data-gs-x="11"]{left:91.66666667%}.grid-stack-item[data-gs-x="10"]{left:83.33333333%}.grid-stack-item[data-gs-x="9"]{left:75%}.grid-stack-item[data-gs-x="8"]{left:66.66666667%}.grid-stack-item[data-gs-x="7"]{left:58.33333333%}.grid-stack-item[data-gs-x="6"]{left:50%}.grid-stack-item[data-gs-x="5"]{left:41.66666667%}.grid-stack-item[data-gs-x="4"]{left:33.33333333%}.grid-stack-item[data-gs-x="3"]{left:25%}.grid-stack-item[data-gs-x="2"]{left:16.66666667%}.grid-stack-item[data-gs-x="1"]{left:8.33333333%}@media(max-width:768px){.grid-stack-item{position:relative !important;width:auto !important;left:0 !important;top:auto !important;margin-bottom:20px}.grid-stack-item .ui-resizable-handle{display:none}.grid-stack{height:auto !important}}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{-webkit-transition:left 0,top 0,height 0,width 0;-moz-transition:left 0,top 0,height 0,width 0;-o-transition:left 0,top 0,height 0,width 0;transition:left 0,top 0,height 0,width 0}