Powerful fluid style layout container.
The Grid
component uses dynamic CSS media query to implement responsive layout, It has ultra-high preformance
and very small size. Of course, it still supports dynamic props and custom breakpoints.
Dynamically scale container width while maintaining spacing.
Containers for wrapping and scaling.
Use different layouts for different screen widths.
Hide elements when unit size is 0.
Auto fill remaining width.
Override the default breakpoints of the @brudi/hui
.
const breakpoints: HuiThemesBreakpoints = {
xs: { min: '0', max: '650px' },
sm: { min: '650px', max: '900px' },
md: { min: '900px', max: '1280px' },
lg: { min: '1280px', max: '1920px' },
xl: { min: '1920px', max: '10000px' },
}
const App = () => (
<HuiProvider theme={{ breakpoints: breakpoints }}>
<CssBaseline />
<AppComponent />
</HuiProvider>
)
Grid.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
justify | CSS "justify-content" property | Justify | Justify | flex-start |
alignItems | CSS "align-items" property | AlignItems | AlignItems | stretch |
alignContent | CSS "align-content" property | AlignContent | AlignContent | flex-start |
direction | CSS "flex-direction" property | Direction | Direction | flex-start |
xs | width of grid, for xs breakpoints and wider screens | number | 0 - 24 , boolean | false |
sm | width of grid, for sm breakpoints and wider screens | number | 0 - 24 , boolean | false |
md | width of grid, for md breakpoints and wider screens | number | 0 - 24 , boolean | false |
lg | width of grid, for lg breakpoints and wider screens | number | 0 - 24 , boolean | false |
xl | width of grid, for xl breakpoints and wider screens | number | 0 - 24 , boolean | false |
... | native props | HTMLAttributes | 'id', 'className', ... | - |
Grid.Container.Props
Attribute | Description | Type | Accepted values | Default |
---|---|---|---|---|
gap | spacing of children | number / float | - | 0 |
wrap | CSS "flex-wrap" property | Wrap | Wrap | wrap |
... | Grid props | Grid.Props | Grid.Props | - |
Justify
type Justify =
| 'flex-start'
| 'center'
| 'flex-end'
| 'space-between'
| 'space-around'
| 'space-evenly'
AlignItems
type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
AlignContent
type AlignContent =
| 'stretch'
| 'center'
| 'flex-start'
| 'flex-end'
| 'space-between'
| 'space-around'
Direction
type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse'
Wrap
type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse'