Как применить псевдокласс :nth-child в файле название.module.css?

https://codesandbox.io/p/sandbox/test-nth-l6hn6s?f...

я использую next js, может в этом проблема, а может я просто неправильно написал класс
в общем вот так выглядит код название.module.css

.grid-container {     background-color: blueviolet; }  .grid-container div:nth-child(3n+1) {     justify-items: start;     background-color: rgb(253, 228, 0); }  .grid-container div:nth-child(3n+2) {     justify-items: center; }  .grid-container div:nth-child(3n+3) {     justify-items: end; }

вот так jsx

import styles from "./cards.module.css";  <div           className={`grid sm:grid-cols-2 lg:grid-cols-3 gap-6 items-center ${styles["grid-container"]}`}         >           {[...Array(3)].map((_, index) => (             // <Card key={index} />              <div               key={index}               style={{ width: "200px", height: "200px", background: "blue" }}               className="test"             >               {index}             </div>           ))}         </div>

в итоге получается такой вывод, background-color: blueviolet работает, а остальные классы нет

Дополнительно:

Залейте код в песочницу и киньте сюда ссылку.

Не то свойство используете

snippet

• а к контейнеру это можно применить?Я понял, что стили применялись к элементам, а грид является сам контейнер, и следовательно justify-items не работал. Или так не делают? или такое делают через js?
• GeorgeKay, justify-items задается для контейнера и определяет значение для свойств детей justify-self, если оно не будет переопределено.

  .container { justify-items: center; } это то же самое что и .container .child { justify-self: center; } только для всех сразу.

  .container { justify-items: center; } это то же самое что и .container .child { justify-self: center; } только для всех сразу.