CSS 中的交错布局

Question

我不知道“交错”是否是调用此布局的正确方式，但我正在尝试这样做：

知道如何区分方框 1 和 2、方框 3 和 4、方框 5 和 6。

import styled from "styled-components";
import { services } from "./data";

const StyleCards = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
`;
const StyleCard = styled.div``;

const StyleImg = styled.img``;
export default function App() {
  return (
    <StyleCards>
      {services.map((service) => (
        <StyleCard key={service.name}>
          <StyleImg src={service.img} />
          <p>{service.name}</p>
          <p>{service.description}</p>
        </StyleCard>
      ))}
    </StyleCards>
  );
}

这是一个代码沙箱https://codesandbox.io/s/react-card-css-5k4xh?file=/src/App.tsx

Answer 1

您可以使用 :nth-child 选择器并为每个组件添加边距顶部来实现该结果

    .Card:nth-child(2n) {
       margin-top: 75px;
    }

由于您使用的是样式化组件，因此您可以这样做

const StyleCard = styled.div`
  width: 150px;
  margin: 10px;
  &:nth-child(2n) {
    margin-top: 75px;
  }
`;

CSS 中的交错布局

Staggered Layout in CSS

css

styled-components