Geist UI

Grid

Powerful fluid style layout container.

The Grid component uses dynamic CSS media query to implement responsive layout, It has ultra-high performance and very small size. Of course, it still supports dynamic props and custom breakpoints.

General

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 @geist-ui/core.

const breakpoints: GeistUIThemesBreakpoints = {
  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 = () => {
  const myTheme = Themes.createFromLight({
    type: 'myTheme',
    breakpoints,
  })
  return (
    <GeistProvider themes={[myTheme]} themeType="myTheme">
      <CssBaseline />
      <AppComponent />
    </GeistProvider>
  )
}

APIs

`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	`row`
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'

Contributors