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.

Standard

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/react.

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 / Schnittstellendokumentation

Grid.Props

AttributeDescriptionTypeAccepted valuesDefault
justifyCSS "justify-content" propertyJustifyJustifyflex-start
alignItemsCSS "align-items" propertyAlignItemsAlignItemsstretch
alignContentCSS "align-content" propertyAlignContentAlignContentflex-start
directionCSS "flex-direction" propertyDirectionDirectionflex-start
xswidth of grid, for xs breakpoints and wider screensnumber0 - 24, booleanfalse
smwidth of grid, for sm breakpoints and wider screensnumber0 - 24, booleanfalse
mdwidth of grid, for md breakpoints and wider screensnumber0 - 24, booleanfalse
lgwidth of grid, for lg breakpoints and wider screensnumber0 - 24, booleanfalse
xlwidth of grid, for xl breakpoints and wider screensnumber0 - 24, booleanfalse
...native propsHTMLAttributes'id', 'className', ...-

Grid.Container.Props

AttributeDescriptionTypeAccepted valuesDefault
gapspacing of childrennumber / float-0
wrapCSS "flex-wrap" propertyWrapWrapwrap
...Grid propsGrid.PropsGrid.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'

Co-Creators