0%
Uix Kit Demo

Uix Grid

It can be used for fluid layout for multiple projects and Bootstrap grid system. Its biggest feature is its support for loop lists.

1/6
1/6
1/6
1/6
1/6
1/6
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/4
1/4
1/4
1/4
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (min 2 cols)
1/4 (min 2 cols)
1/4 (min 2 cols)
1/4 (min 2 cols)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/3
1/3
1/3
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/2 (loop)
1/2 (loop)
1/2 (loop)
1/2
1/2
2/3
1/3
3/4
1/4
4/5
1/5
3/5
2/5
1/4
1/2
1/4
1/3
1/2
1/6
1/5
2/5
2/5
3/5
1/5
1/5

No Gutter Column For Uix Grid

You’ll just want to copy that into your stylesheet and then use the .no-gutter class on your .uix-core-grid__row div

1/6
1/6
1/6
1/6
1/6
1/6
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (min 2 cols & loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/6 (loop)
1/4
1/4
1/4
1/4
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (loop)
1/4 (min 2 cols)
1/4 (min 2 cols)
1/4 (min 2 cols)
1/4 (min 2 cols)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/4 (min 2 cols & loop)
1/3
1/3
1/3
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/3 (loop)
1/2 (loop)
1/2 (loop)
1/2 (loop)
1/2
1/2
2/3
1/3
3/4
1/4
4/5
1/5
3/5
2/5
1/4
1/2
1/4
1/3
1/2
1/6
1/5
2/5
2/5
3/5
1/5
1/5

Uix Grid (No line breaks)

You’ll just want to copy that into your stylesheet and then use the .uix-core-grid__row--nobreaking class on your .uix-core-grid div

Please simulate mobile viewing after zooming out your viewport.

1/6
1/6
1/6
1/6
1/6
1/6
1/4
1/4
1/4
1/4

Inline Block

Use the .uix-core-grid__col-style class name directly, without the need to add a .uix-core-grid wrapper.

1/4
2/5, Center alignment.
2/5, The width becomes 100% on mobile.
2/5, The width becomes 50% on mobile.