跳到主要内容

ResponsiveGrid 响应栅格

响应式栅格组件，根据屏幕尺寸自动调整列数。

何时使用​

  • 需要根据屏幕尺寸调整栅格列数时
  • 需要实现响应式网格布局时

代码演示​

基础用法​

import { ResponsiveGrid } from 'taro-uno';

function Demo() {
  return (
    <ResponsiveGrid>
      <div>项目1</div>
      <div>项目2</div>
      <div>项目3</div>
      <div>项目4</div>
    </ResponsiveGrid>
  );
}

响应式列数​

import { ResponsiveGrid } from 'taro-uno';

function Demo() {
  return (
    <ResponsiveGrid
      cols={{ xs: 1, sm: 2, md: 3, lg: 4 }}
      gap={16}
    >
      <div>项目1</div>
      <div>项目2</div>
      <div>项目3</div>
      <div>项目4</div>
    </ResponsiveGrid>
  );
}

自定义间距​

import { ResponsiveGrid } from 'taro-uno';

function Demo() {
  return (
    <ResponsiveGrid
      cols={3}
      gap={{ row: 16, col: 24 }}
    >
      <div>项目1</div>
      <div>项目2</div>
      <div>项目3</div>
    </ResponsiveGrid>
  );
}

API​

属性说明类型默认值
cols列数配置number | ResponsiveCols{ xs: 1, sm: 2, md: 3, lg: 4 }
gap间距number | { row: number; col: number }0
children子元素ReactNode-
className自定义类名string-
style自定义样式CSSProperties-

平台兼容性​

微信小程序H5React Native鸿蒙
✓✓✓✓