如何在React JS中创建错落布局的3列4行网格

React 组件代码 #

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

const GridLayout = () => {
  const items = Array.from({ length: 12 }).map((_, idx) => (
    <div key={idx} className="grid-item">
      项目 {idx + 1}
    </div>
  ));

  return (
    <div className="grid-container">
      {items}
    </div>
  );
};

export default GridLayout;

对应 CSS 代码（GridLayout.css） #

/* 网格容器基础样式 */
.grid-container {
  display: grid;
  /* 3列均分宽度，可按需改为固定值如200px */
  grid-template-columns: repeat(3, 1fr);
  /* 列之间的间距 */
  column-gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* 网格项目基础样式 */
.grid-item {
  background-color: #f0f0f0;
  padding: 24px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 15px; /* 行之间的间距 */
}

/* 选中中间列的所有项目（第4-7个，对应第二列的4行） */
.grid-item:nth-child(n+4):nth-child(-n+7) {
  margin-top: 15px;
}

说明 #

• 用 CSS Grid 快速搭建3列布局，repeat(3, 1fr) 实现三列宽度均分
• 通过 nth-child 伪类精准定位中间列的4个项目，设置 margin-top:15px 达成错位效果
• 可根据需求调整列宽、间距、项目背景/内边距等样式

内容的提问来源于stack exchange，提问作者Nyanjan