Grid Demo

View Documentation

Bookmarklet

Drag the bookmarklet to your bookmarks bar.

Formstone Grid

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

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

Asymmetrical

fs-sm-1 fs-md-2 fs-lg-4
fs-sm-2 fs-md-4 fs-lg-8

Symmetrical

fs-sm-3 fs-md-3 fs-lg-6
fs-sm-3 fs-md-3 fs-lg-6

3 Column

fs-all-third
fs-all-third
fs-all-third

Nested

fs-sm-full fs-md-half fs-lg-half
fs-sm-full fs-md-half fs-lg-half
fs-sm-full fs-md-2 fs-lg-4

Push

fs-sm-2 fs-sm-push-1 fs-md-3 fs-md-push-3 fs-lg-8 fs-lg-push-4

Contained

fs-cell-contained
fs-cell-contained

Padded

fs-cell-padded
fs-cell-padded

Cell Align Start

1
2
3

Cell Align Center

1
2
3

Cell Align End

1
2
3

Cell Justify Start

1

Cell Justify Center

1

Cell Justify End

1

Cell Order First

1
2
3

Cell Order Last

1
2
3

Cell Width Auto

1
2
3
4

Row Justify Around

1
2

Row Justify Between

1
2

Row Justify Start

1
2

Row Justify Center

1
2

Row Justify End

1
2

Row Align Start

1
2

Row Align Center

1
2

Row Align End

1
2

Row Order Reverse

1
2
3
1
2
3
© 2021 Formstone