grid

by W2F

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js"></script>
<div class="container">
	<div class="row grid-stack">
					<div class="grid-stack-item"
					data-gs-x="1" 
					data-gs-y="0"
					data-gs-width="2" 
					data-gs-height="23"							
					data-wd_id="15">
				<div class="grid-stack-item-content">
					1<br />
<div>&nbsp;</div>
<div>Sed congue, quam vel fermentum finibus, nisl nisl vestibulum purus, eget gravida sem dui lobortis sem. Sed mollis justo purus, sit amet blandit dolor efficitur non. Sed vel nisi sit amet velit lobortis molestie eget id quam. Duis consequat, odio eu scelerisque rutrum, diam mauris commodo lectus, quis eleifend est metus vitae urna. Pellentesque condimentum mauris eget nibh aliquam, at sodales nisi congue. Proin urna dui, cursus in lobortis quis, vestibulum ut ipsum. Nullam sed nisi ante. Etiam tortor quam, volutpat vitae dignissim et, blandit nec eros. Suspendisse elementum arcu sed metus vehicula, ut euismod quam egestas. Sed nulla mauris, suscipit vitae justo ut, sagittis egestas dui. Pellentesque lobortis pretium turpis, vitae dictum purus dapibus eget. Vivamus sed turpis quis massa varius molestie. Nulla tincidunt mauris a velit interdum ultrices.</div>
<div>&nbsp;</div>
<div>Sed...

CSS

.grid-stack-item {
	background: orchid;
	text-align: center;
	margin-bottom: 16px;
	min-height: 100px;
}

.grid-stack-item:nth-of-type(2n) {
	background: cyan;
}

JavaScript

$(document).ready(function(){
		    var options = {
		        cellHeight: 30,
		        verticalMargin: 10,
		        disableDrag: true,
		        disableResize: true  
		    };
		    $('.grid-stack').gridstack(options);
		});