Grid

Grid system used to create complex layouts.

Import

import { Grid } from 'raw-ui';

Basic

Gutter

Offset

Order

Align

Justify

Responsive

API

Grid

Prop	Description	Type	Default
gutter	spacing between grids	Gutter	[0, 0]
align	vertical alignment	ResponsiveValue<Align>	'normal'
justify	horizontal arrangement	ResponsiveValue<Justify>	'normal'
...	native props	React.HTMLAttributes	-

Grid.Col

Prop	Description	Type	Default	Range
offset	The number of cells to offset Col from the left	ResponsiveValue<number>	0	1 - 24
order	The order of Col	ResponsiveValue<number>	0	1 - 24
span	The number of cells to occupy, 0 corresponds to display: none	ResponsiveValue<number>	-	1 - 24

Type

import { BreakPoint, ResponsiveValue, Gutter, Align, Justify } from 'raw-ui';

BreakPoint

xs: screen width < 576px
sm: screen width ≥ 576px
md: screen width ≥ 768px
lg: screen width ≥ 992px
xl: screen width ≥ 1200px
xxl: screen width ≥ 1600px

enum BreakPoints {
  xs = 'xs',
  sm = 'sm',
  md = 'md',
  lg = 'lg',
  xl = 'xl',
  xxl = 'xxl',
}
type BreakPoint = keyof typeof BreakPoints;

ResponsiveValue

type ResponsiveValue<T> = T | { [key in BreakPoint]?: T };

Gutter

type Gutter = [ResponsiveValue<number>, ResponsiveValue<number>];

Align

enum Aligns {
  normal = 'normal',
  top = 'top',
  center = 'center',
  bottom = 'bottom',
}
 
type Align = keyof typeof Aligns;

Justify

enum Justifies {
  normal = 'normal',
  start = 'start',
  center = 'center',
  end = 'end',
  'space-between' = 'space-between',
  'space-around' = 'space-around',
  'space-evenly' = 'space-evenly',
}
 
type Justify = keyof typeof Justifies;