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

Question

id想要反转这些组件。我用的是标准显示:网格;谷歌告诉我它的网格自动流:密集;但这行不通。所以我想也许我在组件结构上有问题?对我来说，最好的办法是把每个偶数都反过来

在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;
}

`

我localhost

Answer 1

flex-direction: row-reverse会帮你解决你的问题。

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