如何使用 React 和 Styled 组件反转网格列

Question

我想反转这些组件。我正在使用标准显示：网格；谷歌告诉我它的网格自动流：密集；但它不起作用。所以我想也许我的组件结构有问题？对我来说很好的方式是设置每个偶数都会被逆转

在index.js中

            <ContainerCard>
              <CardImg src={photo1}/>
              <CardInfo>
                <CardH2>Title #1</CardH2>
                <CardP>
                     Some text 
                </CardP>
              </CardInfo>
            </ContainerCard>

在 Styled.js 中

export const ContainerCard = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;

    @media screen and (max-width: 768px) {
        grid-template-columns: 1fr;
    }
  
`

我的本地主机

Answer 1

flex-direction: row-reverse

会帮助您解决问题。

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

Answer 2

我找到了一种方法，使用应用于容器和子级的单行 css 来反转 css 网格顺序...

transform: scale(-1, 1);

Codepen 在这里：https://codepen.io/RobLessard/pen/XWLzQgx