Grid

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.

Default

Dynamically scale container width while maintaining spacing.

Fluid layout

Containers for wrapping and scaling.

Responsive layout

Use different layouts for different screen widths.

Hide elements

Hide elements when unit size is 0.

Auto width

Auto fill remaining width.

custom breakpoints

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>
)

APIs

type Justify =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'space-between'
  | 'space-around'
  | 'space-evenly'

type AlignItems = 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'

type AlignContent =
  | 'stretch'
  | 'center'
  | 'flex-start'
  | 'flex-end'
  | 'space-between'
  | 'space-around'

type Direction = 'row' | 'row-reverse' | 'column' | 'column-reverse'

type Wrap = 'nowrap' | 'wrap' | 'wrap-reverse'