基于Flexible Grid的响应式布局开发需求（JSX+SCSS实现）

布局说明 #

需实现的布局在移动端为单列展示，768px、1024px屏幕下匹配设计图的多列效果，全程通过Grid原生属性实现，避免使用translate/transform调整元素位置，减少断点重复代码。

JSX代码 #

import React from 'react';
import './LayoutStyles.scss';

const FlexibleGridLayout = () => {
  const gridItems = Array.from({ length: 6 }, (_, index) => ({
    id: index + 1,
    content: `内容项 ${index + 1}`
  }));

  return (
    <div className="flexible-grid-container">
      {gridItems.map(item => (
        <div key={item.id} className="grid-item">
          {item.content}
        </div>
      ))}
    </div>
  );
};

export default FlexibleGridLayout;

SCSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.flexible-grid-container {
  padding: 1rem;
  gap: 1rem;
  // 移动端默认单列
  display: grid;
  grid-template-columns: 1fr;

  // 768px断点布局
  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    // 按设计图调整特殊项位置（示例：第1项跨整行）
    .grid-item:nth-child(1) {
      grid-column: 1 / -1;
    }
  }

  // 1024px断点布局
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    // 按设计图定义项位置，无需transform/translate
    .grid-item:nth-child(1) {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
    }
    .grid-item:nth-child(2) {
      grid-row: 1 / 2;
    }
  }
}

.grid-item {
  padding: 2rem;
  background-color: #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

方案优势 #

• 用Grid原生的grid-column/grid-row控制元素位置，替代不稳定的translate/transform调整
• 遵循移动端优先思路，媒体查询仅增量修改布局规则，避免重复编写代码
• 使用fr单位实现弹性列宽，自动适配容器宽度，无需手动计算百分比

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