Gridlock Demo

Fluid Grid

Switch to Adaptive Grid


View Documentation

Bookmarklet

Drag the bookmarklet to your bookmarks bar.

Gridlock

Or, include it on every page of your development site:

<script>
(function(){if(typeof GridlockBookmarklet=='undefined'){document.body.appendChild(document.createElement('script')).src='http://formstone.it/js/gridlock.bookmarklet.js';}else{GridlockBookmarklet();}})();
</script>

Asymmetrical

<body class="gridlock">
	<div class="row">
		<div class="desktop-4 tablet-2 mobile-1">
			Sidebar
		</div>
		<div class="desktop-8 tablet-4 mobile-3">
			Content
		</div>
	</div>
</body>
Demo
desktop-4 tablet-2 mobile-1
desktop-8 tablet-4 mobile-2

Symmetrical

<body class="gridlock">
	<div class="row">
		<div class="desktop-3 tablet-3 mobile-3">
			One
		</div>
		<div class="desktop-3 tablet-3 mobile-3">
			Two
		</div>
		<div class="desktop-3 tablet-3 mobile-3">
			Three
		</div>
		<div class="desktop-3 tablet-3 mobile-3">
			Four
		</div>
	</div>
</body>
Demo
desktop-3 tablet-3 mobile-3
desktop-3 tablet-3 mobile-3
desktop-3 tablet-3 mobile-3
desktop-3 tablet-3 mobile-3

3 Column

<body class="gridlock">
	<div class="row">
		<div class="desktop-4 tablet-2 mobile-1">
			One
		</div>
		<div class="desktop-4 tablet-2 mobile-1">
			Two
		</div>
		<div class="desktop-4 tablet-2 mobile-1">
			Three
		</div>
	</div>
</body>
Demo
desktop-4 tablet-2 mobile-1
desktop-4 tablet-2 mobile-1
desktop-4 tablet-2 mobile-1

Push

<body class="gridlock">
	<div class="row">
		<div class="desktop-4 desktop-push-4 tablet-2 tablet-push-2 mobile-2 mobile-push-1"></div>
	</div>
	<div class="row">
		<div class="desktop-4 desktop-push-2 tablet-2 tablet-push-1 mobile-1"></div>
		<div class="desktop-4 tablet-2 mobile-1"></div>
	</div>
	<div class="row">
		<div class="desktop-12 tablet-6 mobile-3"></div>
	</div>
</body>
Demo
desktop-4 desktop-push-4 tablet-2 tablet-push-2 mobile-2 mobile-push-1
desktop-4 desktop-push-2 tablet-2 tablet-push-1 mobile-1
desktop-4 tablet-2 mobile-1
desktop-12 tablet-6 mobile-3

Centered

<body class="gridlock">
	<div class="row">
		<div class="desktop-7 tablet-3 mobile-1 centered">
			One
		</div>
		<div class="desktop-7 tablet-3 mobile-1  centered">
			Two
		</div>
		<div class="desktop-7 tablet-3 mobile-1  centered">
			Three
		</div>
	</div>
</body>
Demo
desktop-7 tablet-3 mobile-1
desktop-7 tablet-3 mobile-1
desktop-7 tablet-3 mobile-1

Padded

<body class="gridlock">
		<div class="row">
			<div class="desktop-4 tablet-2 mobile-1 padded">
				Sidebar
			</div>
			<div class="desktop-8 tablet-4 mobile-2 padded">
				Content
			</div>
		</div>
</body>
Demo
desktop-4 tablet-2 mobile-1
desktop-8 tablet-4 mobile-2

Contained

<body class="gridlock">
	<div class="row">
		<div class="desktop-4 tablet-2 mobile-1 contained">
			Sidebar
		</div>
		<div class="desktop-8 tablet-4 mobile-2 contained">
			Content
		</div>
	</div>
</body>
Demo
desktop-4 tablet-2 mobile-1
desktop-8 tablet-4 mobile-2