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 (equal width)
1/5 (equal width)
1/5 (equal width)
1/5 (equal width)
1/5 (equal width)
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 (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 (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/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

Set the noGutters attribute of <Grid> markup.true will remove all the columns spacing.


1/5 (equal width)
1/5 (equal width)
1/5 (equal width)
1/5 (equal width)
1/5 (equal width)
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 (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 (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/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)

Set the noBreak attribute of <Grid> markup.true will prevent the columns from automatically wrapping across multiple lines. Please simulate mobile viewing after zooming out your viewport.


1/5 (equal width)
1/5 (equal width)
1/5 (equal width)
1/5 (equal width)
1/5 (equal width)
3/4
1/4

Inline Block

Only use <GridColumn>markup without using<Grid> to wrap them.


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

API


Grid

import {Grid} from '@uixkit.react/components/Grid/index.tsx';
PropertyTypeDefaultDescription
noBreakbooleanfalsePermanent non-breaking all columns
noGuttersbooleanfalseRemove column spacing
equalWidthbooleanfalsePer-column will be the same width automatically
loopbooleanfalseMulti-line layout correction

GridColumn

import {GridColumn} from '@uixkit.react/components/Grid/index.tsx';
PropertyTypeDefaultDescription
ratio1/1 | 1/2 | 1/3 | 2/3 | 1/4 |3/4 | 1/5 | 2/5 | 3/5 | 4/5 |1/6 | boolean-The ratio of each column
stackRatio1/1 | 1/2 | 1/3 | 2/3 | 1/4 |3/4 | 1/5 | 2/5 | 3/5 | 4/5 |1/6 | boolean-The ratio of stacked breakpoints.
You can set breakpoints for the stackSizeand stackRatio props that starts out stacked before becoming horizontal with at the small breakpoint. Setting it to a breakpoint (sm, md, lg, xl) of thestackSize prop will set the <GridColumn>...</Grid>as fluid until the specified breakpoint
stackSizesm | md | lg | xl | boolean-The size of stacked breakpoints
inlinebooleanfalseThis attribute will make the column in a separate block, there is no float, and its centering can be controlled