QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Creating Full Screen Grid Layouts using jQuery Nested

Creating Full Screen Grid Layouts using jQuery Nested

Screen Shot 2014-12-07 at 10.45.52 pm

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

<!doctype html>
<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.

View Demo

<!doctype html>
<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>
Dec 8, 2014Narayan Prusty
Encrypting Local Data In Intel XDKCreate a Music Player App using Intel XDK

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Understanding How Nested Works?
  • Basic Template
  • A Complete Example
Related Articles
  • Create a Drag and Drop Page Builder for WordPress
  • Creating Cascading Grid Layouts Using Masonry
  • Response Tabs – Horizontal and Vertical
  • Creating A Viewport Resizer
  • Full Screen Scrolling with Page Split Effect
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license