Bir web sayfasına magazin/gazete görünümünde gird oluşturmak JQuery ile çok basit bir şekilde olmaktadır. Aşağıda kullanılan yöntem ve fonksiyonlar çok basit olması nedeniyle bir çok kişi tarafından rahatlıkla uygulanabilir. Bunları adımlayarak yapacak olursak:

1- Basit bir html sayfası oluşturalım:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<head>

        <title>Fluid grid</title>

        <script type="text/javascript" src="http://arsiv.pilli.com/http://arsiv.pilli.com/script/jquery-1.3.2.min.js"></script>

    </head>

    <body>

        <div class="box"><p><span>01</span>01 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>02</span>02 Numaralı kutu...</p></div>

        <div class="box"><p><span>03</span>03 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>04</span>04 Numaralı kutu...</p></div>

        <div class="box"><p><span>05</span>05 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>06</span>06 Numaralı kutu...</p></div>

        <div class="box"><p><span>07</span>07 Numaralı kutu...</p></div>

        <div class="box alt"><p><span>08</span>08 Numaralı kutu...</p></div>

        <div class="box"><p><span>09</span>09 Numaralı kutu...</p></div>

    </body>