react 如何栅格化布局

栅格化布局实现方法

React 中实现栅格化布局可以通过多种方式完成，常见方法包括使用 CSS Grid、Flexbox 或第三方库如 react-grid-system、Material-UI 的 Grid 组件。

使用 CSS Grid

CSS Grid 是原生 CSS 提供的强大布局系统，适合复杂的二维布局需求。

import React from "react";
import "./GridLayout.css";

function GridLayout() {
  return (
    <div className="grid-container">
      <div className="grid-item">1</div>
      <div className="grid-item">2</div>
      <div className="grid-item">3</div>
    </div>
  );
}

export default GridLayout;

配套 CSS 文件示例：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.grid-item {
  background: #f0f0f0;
  padding: 20px;
}

使用 Flexbox

Flexbox 适合一维布局，可通过简单配置实现响应式栅格。

function FlexGrid() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
      {[...Array(6)].map((_, i) => (
        <div key={i} style={{ flex: '1 0 200px', background: '#eaeaea' }}>
          Item {i+1}
        </div>
      ))}
    </div>
  );
}

使用 Material-UI Grid

Material-UI 提供现成的栅格组件，基于 Flexbox 实现并内置响应式规则。

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

function MuiGrid() {
  return (
    <Grid container spacing={2}>
      <Grid item xs={12} sm={6} md={4}>
        <div style={{ background: '#ddd' }}>Block 1</div>
      </Grid>
      <Grid item xs={12} sm={6} md={4}>
        <div style={{ background: '#ddd' }}>Block 2</div>
      </Grid>
    </Grid>
  );
}

使用 react-grid-system

该库提供类似 Bootstrap 的栅格系统，支持响应式断点。

import { Container, Row, Col } from 'react-grid-system';

function ReactGrid() {
  return (
    <Container>
      <Row>
        <Col sm={4}>Left</Col>
        <Col sm={4}>Middle</Col>
        <Col sm={4}>Right</Col>
      </Row>
    </Container>
  );
}

响应式设计要点

1. 断点处理：使用媒体查询或库自带的断点系统（如 xs/sm/md/lg/xl）
2. 间距控制：通过 gap 或 spacing 属性统一调整项目间距
3. 动态列数：结合 repeat(auto-fill, minmax(200px, 1fr)) 实现自动填充

/* 自动适应列数的示例 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}