+

Grid Systems






Grids are used to display multiple HTML-elements, components & modules grid-wise on multiple devices. PixelzUI provides forty-eight classes for nine grids. These grids will further assist in other components & modules.

Types

There are nine types of grid systems as listed below:

  1. Two Column Grid Systems
  2. Three Column Grid Systems
  3. Four Column Grid Systems
  4. Five Column Grid Systems
  5. Six Column Grid Systems
  6. Eight Column Grid Systems
  7. Nine Column Grid Systems
  8. Ten Column Grid Systems
  9. Twelve Column Grid Systems

Classes

Following are the classes to use grids in your scripts.

  1. Two Column Grid Systems
  2. .cl2-1.cl2-2.cl2-3.cl2-4.cl2.cl2-6.cl2-7.cl2-8.cl2-9
  3. Three Column Grid Systems
  4. .cl3-1.cl3-2.cl3-3.cl3.cl3-4.cl3-5.cl3-6.cl3-7.cl3-8
  5. Four Column Grid Systems
  6. .cl4-1.cl4-2.cl4.cl4-3.cl4-4.cl4-5.cl4-6.cl4-7
  7. Five Column Grid Systems
  8. .cl5-1.cl5-2.cl5.cl5-3.cl5-4.cl5-5.cl5-6
  9. Six Column Grid Systems
  10. .cl6-1.cl6.cl6-2.cl6-3.cl6-4.cl6-5
  11. Eight Column Grid Systems
  12. .cl8-1.cl8.cl8-2.cl8-3
  13. Nine Column Grid Systems
  14. .cl9-1.cl9.cl9-2
  15. Ten Column Grid Systems
  16. .cla
  17. Twelve Column Grid Systems
  18. .clb
.

How to use

  1. Add any container class.
  2. <div class="cntrA"></div>
  3. Add .cl in the class attribute of <div> and then add .cl*-# mentioned above.
  4. <div class="cntrA">
     <div class="cl cl2-3"></div>
     <div class="cl cl2-7"></div>
    </div>
  5. Add .cl* for symmetrical grids.
  6. <div class="cntrA">
     <div class="cl cl5"></div>
     <div class="cl cl5"></div>
    </div>
=>* means (2, 3, 4, 5, 6, 8, 9, a & b).

=># means (1 - 9).

Demo

Two Column Grid Systems

cl2-1
cl2-9
cl2-2
cl2-8
cl2-3
cl2-7
cl2-4
cl2-6
cl2
cl2
cl2-6
cl2-4
cl2-7
cl2-3
cl2-8
cl2-2
cl2-9
cl2-1
.
.
.
Three Column Grid Systems

cl3-1
cl3-2
cl3-7
cl3-3
cl3-4
cl3-3
cl3
cl3
cl3
cl3-5
cl3-4
cl3-1
cl3-6
cl3-2
cl3-2
.
.
.
Four Column Grid Systems

cl4-1
cl4-2
cl4-3
cl4-4
cl4
cl4
cl4
cl4
cl4-5
cl4-1
cl4-2
cl4-2
cl4-6
cl4-1
cl4-1
cl4-2
cl4-7
cl4-1
cl4-1
cl4-1
.
.
.
Five Column Grid Systems

cl5-1
cl5-2
cl5-3
cl5-3
cl5-1
cl5
cl5
cl5
cl5
cl5
cl5-5
cl5-1
cl5-1
cl5-2
cl5-1
cl5-6
cl5-1
cl5-1
cl5-1
cl5-1
.
.
.
Six Column Grid Systems

cl6-1
cl6-2
cl6-2
cl6-3
cl6-1
cl6-1
.
cl6
cl6
cl6
cl6
cl6
cl6
.
cl6-4
cl6-1
cl6-1
cl6-1
cl6-1
cl6-2
.
cl6-5
cl6-1
cl6-1
cl6-1
cl6-1
cl6-1
.
.
.
.
Eight Column Grid Systems

cl8-1
cl8-1
cl8-1
cl8-1
cl8-1
cl8-1
cl8-2
cl8-2
cl8
cl8
cl8
cl8
cl8
cl8
cl8
cl8
cl8-3
cl8-1
cl8-1
cl8-1
cl8-1
cl8-1
cl8-1
cl8-1
.
.
.
Nine Column Grid Systems

cl9-1
cl9-1
cl9-1
cl9-1
cl9-1
cl9-1
cl9-1
cl9-1
cl9-2
cl9
cl9
cl9
cl9
cl9
cl9
cl9
cl9
cl9
.
.
.
Ten Column Grid Systems

cla
cla
cla
cla
cla
cla
cla
cla
cla
cla
.
.
.
Twelve Column Grid Systems

clb
clb
clb
clb
clb
clb
clb
clb
clb
clb
clb
clb
.
.
.

Editing

You can edit grids of your own choice by using this editor.

  1. Select grid class from range slider.
  2. See the effect in dummy panel and HTML code.
  3. Copy that HTML code and place it in your script.

Two Column Grids

HTML




cl2
cl2



=> Editors of others' grids will be uploaded soon.

Leave a Reply

Your email address will not be published. Required fields are marked.