Grid / 栅格

强大的流体风格布局容器。

Grid 组件使用 动态 CSS 媒体查询 实现响应式布局，同时具备超高的性能与极小的体积。当然，组件也支持动态属性与自定义断点。

基础的

保持间距同时动态缩放容器宽度。

流体布局

容器的自动换行与缩放。

响应式布局

在不同屏幕宽度下自动使用不同布局方式。

隐藏元素

当单位大小为 0 时会自动隐藏当前元素。

自动宽度

自动分配剩余宽度。

定制断点

您可以覆盖 @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

属性描述类型推荐值默认
justifyCSS 属性 "justify-content"JustifyJustifyflex-start
alignItemsCSS 属性 "align-items"AlignItemsAlignItemsstretch
alignContentCSS 属性 "align-content"AlignContentAlignContentflex-start
directionCSS 属性 "flex-direction"DirectionDirectionflex-start
xs栅格宽度，影响 xs 断点与更宽的屏幕number0 - 24, booleanfalse
sm栅格宽度，影响 sm 断点与更宽的屏幕number0 - 24, booleanfalse
md栅格宽度，影响 md 断点与更宽的屏幕number0 - 24, booleanfalse
lg栅格宽度，影响 lg 断点与更宽的屏幕number0 - 24, booleanfalse
xl栅格宽度，影响 xl 断点与更宽的屏幕number0 - 24, booleanfalse
...原生属性HTMLAttributes'id', 'className', ...-

Grid.Container.Props

属性描述类型推荐值默认
gap子组件的间距number / float-0
wrapCSS 属性 "flex-wrap"，指定换行方式WrapWrapwrap
...继承 Grid 的所有属性Grid.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'
Add