当前位置：首页 > React

react 如何栅格化布局

2026-01-24 07:10:48React

React 栅格化布局的实现方法

使用 CSS Grid

CSS Grid 是现代浏览器支持的强大布局系统，可以直接在 React 组件中通过 className 或内联样式应用。

<div style={{
  display: 'grid',
  gridTemplateColumns: 'repeat(3, 1fr)',
  gap: '16px'
}}>
  {[1, 2, 3, 4, 5, 6].map(item => (
    <div key={item} style={{ background: '#eee', padding: '20px' }}>
      Item {item}
    </div>
  ))}
</div>

使用 Flexbox 布局

Flexbox 是另一种流行的布局方式，适合简单的栅格需求。

<div style={{
  display: 'flex',
  flexWrap: 'wrap',
  gap: '16px'
}}>
  {[1, 2, 3, 4, 5, 6].map(item => (
    <div key={item} style={{ 
      flex: '1 0 30%',
      background: '#eee', 
      padding: '20px' 
    }}>
      Item {item}
    </div>
  ))}
</div>

使用第三方库

流行的 React UI 库都提供了栅格系统组件：

react 如何栅格化布局

Material-UI: Grid 组件
Ant Design: Row 和 Col 组件
Bootstrap React: Row 和 Col 组件

以 Material-UI 为例：

import Grid from '@mui/material/Grid';

<Grid container spacing={2}>
  <Grid item xs={12} sm={6} md={4}>
    Item 1
  </Grid>
  <Grid item xs={12} sm={6} md={4}>
    Item 2
  </Grid>
  <Grid item xs={12} sm={6} md={4}>
    Item 3
  </Grid>
</Grid>

自定义响应式栅格

可以结合 CSS 媒体查询创建响应式栅格：

react 如何栅格化布局

const styles = {
  container: {
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
    gap: '20px',
    padding: '20px'
  },
  item: {
    background: '#f5f5f5',
    padding: '15px',
    borderRadius: '4px'
  }
};

function GridComponent() {
  return (
    <div style={styles.container}>
      {[1, 2, 3, 4, 5, 6].map(item => (
        <div key={item} style={styles.item}>
          Item {item}
        </div>
      ))}
    </div>
  );
}

动态栅格布局

可以根据数据动态生成不同大小的栅格项：

function DynamicGrid({ items }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
      gap: '16px'
    }}>
      {items.map(item => (
        <div key={item.id} style={{
          gridColumn: `span ${item.span || 1}`,
          background: '#eee',
          padding: '16px'
        }}>
          {item.content}
        </div>
      ))}
    </div>
  );
}

选择哪种方法取决于项目需求：