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/5
1/5
1/5
1/5
1/5
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
2/3
1/5
1/5
No Gutter Column For Uix Grid
You’ll just want to copy that into your stylesheet and then use the .uix-core-grid__row--no-gutters class on your .uix-core-grid__row div
1/5
1/5
1/5
1/5
1/5
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
2/3
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--no-break class on your .uix-core-grid__row div
Please simulate mobile viewing after zooming out your viewport.
1/5
1/5
1/5
1/5
1/5
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.