Html 如何使用 nthchild() 设置列表样式

我有以下code条.

HTML

    export default function App() {
      const data = [
        { id: 1, title: "1" },
        { id: 2, title: "2" },
        { id: 3, title: "3" },
        { id: 4, title: "4" },
        { id: 5, title: "5" },
        { id: 6, title: "6" },
        { id: 7, title: "7" },
        { id: 8, title: "8" },
        { id: 9, title: "9" },
        { id: 10, title: "10" },
        { id: 11, title: "11" }
      ];
      return (
        <div className="App">
          {data.map((el) => (
            <div key={el.id} className="block">
              {el.title}
            </div>
          ))}
        </div>
      );
    }

政务司司长

    .App {
      display: grid;
      grid-template-columns: 50% 50%;
    }

    .block {
      border: 1px solid black;
      height: 50px;
    }

    .block:nth-child(3n + 1) {
      background-color: red;
    }

    .block:nth-child(3n + 2) {
      background-color: green;
    }

    .block:nth-child(3n + 3) {
      background-color: blue;
    }

我正在try 给我的.block个班级以下的风格.但这并不管用.我试了红色的(3n + 1)，绿色的(3n + 2)，蓝色的(3n + 3).还有，我试着用:first-child()来换红，但也没成功

请帮助我达到图中所示的预期效果.谢谢