Menu

Fluid Grid System by Krell1983

Fluid grid
Mobile first
Easy to use
Complex Grid
Lightweight
Professional

I created this system to have more control over RWD grid.

Add this line to html5 head: <meta name="viewport" content="width=device-width, initial-scale=1.0"> This line makes resolution to be scale correctly on mobile devices.
For example iphone 6 plus have resolution of 1920px x 1080px thanks to that line user will receive 736px x 441px version of web page that will scale correctly.

Class construction

All responsive divs should have class XS_Coll... (Only responsive divs, not all divs).
Example: Size_Grid_GridType
Example: XS_Grid_1x1

All Grid Sizes :

Old Mobile
XS — Extra Small — from width: [ 0px + ]

Modern Mobile
S — Small — from width: [ 350px + ]

Big Mobile and Small Tablet
SM — Small to Medium — from width: [ 500px + ]

Medium Tablet
M — Medium — from width: [ 650px + ]

Old Laptop and Big Tablet
ML — Medium to Large — from width: [ 800px + ]

Laptop and Old PC
L — Large — from width: [ 1000px + ]

HD PC
XL — Extra Large — from width: [ 1200px + ]

All Grid Type Names :

12 Collumn Grid: 1x12, 2x12, 3x12, 4x12, 5x12, 6x12, 7x12, 8x12, 9x12, 10x12, 11x12

8 Collumn Grid: 1x8, 2x8, 3x8, 4x8, 5x8, 6x8, 7x8

6 Collumn Grid: 1x6, 2x6, 3x6, 4x6, 5x6

4 Collumn Grid: 1x4, 2x4, 3x4

3 Collumn Grid: 1x3, 2x3

2 Collumn Grid: 1x2

1 Collumn Grid: 1x1

Column Grids Examples

12 Column Grid

Grid_1x12
Grid_11x12
Grid_2x12
Grid_10x12
Grid_3x12
Grid_9x12
Grid_4x12
Grid_8x12
Grid_5x12
Grid_7x12
Grid_6x12
Grid_6x12

8 Column Grid

Grid_1x8
Grid_7x8
Grid_2x8
Grid_6x8
Grid_3x8
Grid_5x8
Grid_4x8
Grid_4x8

6 Column Grid

Grid_1x6
Grid_5x6
Grid_2x6
Grid_4x6
Grid_3x6
Grid_3x6

4 Column Grid

Grid_1x4
Grid_3x4
Grid_2x4
Grid_2x4

3 Column Grid

Grid_1x3
Grid_2x3

2 Column Grid

Grid_1x2
Grid_1x2

1 Column Grid

Grid_1x1