如何使用React和Styled Components反转Grid网格列顺序

• grid-auto-flow: dense的作用是让网格布局算法自动回填排列过程中产生的空白空位，本身不具备自动反转偶数项排列顺序的功能，属于属性用途理解偏差。
• 当前代码每个ContainerCard作为独立网格容器，内部固定只有2个子元素，两列布局下刚好占满整行，不存在空白空位，dense属性没有触发条件，自然不会生效。
• 代码中没有给偶数项的子元素配置任何列位置偏移规则，不可能自动出现顺序反转效果。

你需要的奇偶行左右交替布局，可以通过以下两种方案实现，不需要依赖dense属性：

方案1：统一父容器布局（推荐） #

把所有卡片的图片、文字元素放到同一个grid父容器下，不要给每个卡片单独套独立grid容器，通过nth选择器批量控制偶数项位置。
首先调整JSX结构：

// index.js
<CardListWrapper>
  {/* 第1项 奇数行 */}
  <CardImg src={photo1}/>
  <CardInfo>
    <CardH2>Title #1</CardH2>
    <CardP>Some text</CardP>
  </CardInfo>
  {/* 第2项 偶数行 */}
  <CardImg src={photo2}/>
  <CardInfo>
    <CardH2>Title #2</CardH2>
    <CardP>Some text</CardP>
  </CardInfo>
  {/* 后续卡片按相同结构排列即可 */}
</CardListWrapper>

对应样式代码：

// Styled.js
export const CardListWrapper = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem; // 按需调整卡片间距

  // 偶数项的图片，自动放到第二列
  & > :nth-child(4n-2) {
    grid-column: 2;
  }
  // 偶数项的文字块，自动放到第一列
  & > :nth-child(4n-1) {
    grid-column: 1;
  }

  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    // 移动端恢复默认上下排列顺序
    & > * {
      grid-column: auto !important;
    }
  }
`

方案2：保留现有独立卡片结构 #

如果不想调整现有DOM结构，可以给偶数序号的卡片容器加反转类，手动调换内部元素位置。
首先补充样式：

// Styled.js
export const ContainerCard = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem; // 按需调整卡片间距

  // 反转状态下交换图片和文字的列位置
  &.reverse {
    & > :first-child {
      grid-column: 2;
    }
    & > :last-child {
      grid-column: 1;
    }
  }

  @media screen and (max-width: 768px) {
    grid-template-columns: 1fr;
    // 移动端恢复默认上下排列
    &.reverse > * {
      grid-column: auto !important;
    }
  }
`

渲染偶数项卡片时给容器加reverse类即可：

{/* 奇数项 */}
<ContainerCard>
  <CardImg src={photo1}/>
  <CardInfo>
    <CardH2>Title #1</CardH2>
    <CardP>Some text</CardP>
  </CardInfo>
</ContainerCard>
{/* 偶数项 加反转类 */}
<ContainerCard className="reverse">
  <CardImg src={photo2}/>
  <CardInfo>
    <CardH2>Title #2</CardH2>
    <CardP>Some text</CardP>
  </CardInfo>
</ContainerCard>

补充：只有当网格内元素因为设置跨列、固定位置产生空白缺口时，grid-auto-flow: dense才会生效，作用是让后续元素自动往前填补缺口，本身没有排序、反转元素的能力，这是之前属性不生效的核心原因。

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