In this tutorial I will introduce you to jQuery Nested. Its a jQuery plugin that lets you create “no column limit” grid layouts.
Understanding How Nested Works?
Nested takes a list of grid items and a grid container. Nested arranges the grid items inside the container dynamically using JavaScript. Number of columns is calculated based on container width. We can also insert grids items any time dynamically i.e., using JavaScript and Nested will arrange them. Its completely responsive i.e, if the container width changes then it re-arranges the grid items.
The only thing we need to care about is container width. Due to these dynamic features its very suitable for creating full screen grids layouts.
Basic Template
Here is the code how you need to include Nested in your webpage
<html>
<head>
<title>jQuery Nested Example</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"</script>
</head>
<body>
<div id="container">
<div class="box size11"></div>
</div>
<script type="text/javascript" src="https://cdn.rawgit.com/suprb/Nested/master/jquery.nested.js"></script>
<script type="text/javascript">
$("#container").nested({
selector: '.box',
gutter: 10,
minWidth: 100
});
</script>
</body>
</html>
#container is the element on which dynamic grid is created. It holds the grid items. .box elements are grid items.
Sizing of grid items are handled by adding sizeWH class where W is the number of columns the box shall use and H is the number of rows the box shall use. E.g size15 equals width: 1 column and height: 5 rows
The column and row size in pixels is set by the minWidth option. By default it is 50px.
gutter option defines the horizontal and vertical gap between the grid elements in pixels. By default it is 1px.
A Complete Example
Here is an complete example of jQuery nested full screen grid layout.
<html>
<head>
<title>jQuery Nested Example</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.box
{
border-width: 2px;
border-color: black;
border-style: solid;
}
</style>
</head>
<body>
<div id="container">
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size32"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size12"></div>
<div class="box size31"></div>
<div class="box size22"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size12"></div>
<div class="box size21"></div>
<div class="box size23"></div>
<div class="box size22"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size12"></div>
<div class="box size21"></div>
<div class="box size22"></div>
<div class="box size23"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size12"></div>
<div class="box size21"></div>
<div class="box size22"></div>
<div class="box size22"></div>
<div class="box size21"></div>
<div class="box size23"></div>
<div class="box size22"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size12"></div>
<div class="box size21"></div>
<div class="box size22"></div>
<div class="box size23"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size32"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size12"></div>
<div class="box size31"></div>
<div class="box size22"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size12"></div>
<div class="box size21"></div>
<div class="box size23"></div>
<div class="box size22"></div>
<div class="box size11"></div>
<div class="box size21"></div>
<div class="box size12"></div>
<div class="box size21"></div>
</div>
<script type="text/javascript" src="https://cdn.rawgit.com/suprb/Nested/master/jquery.nested.js"></script>
<script type="text/javascript">
$("#container").nested({
selector: '.box',
gutter: 10,
minWidth: 100,
resizeToFit: true
});
</script>
</body>
</html>
@narayanprusty
Leave a Reply