How to create a grid with up and down in react js

I want to create a grid with 3 columns, each column have 4 rows. First and last one start with margin-top 0, center one start with margin-top of 15px

Above image is for example.
Thanks for the help.

I added the image, I want a code for this example in css

.hand-item-grid {
  display: grid;
  grid-template-columns: repeat(var(--player-count), auto);
  grid-template-rows: repeat(1, auto);
  column-gap: calc(var(--card-gap) * 2);
}
.hand-grid-columns {
  padding: var(--card-gap);
  display: grid;
  grid-row: 1 / 2;
  grid-gap: var(--card-gap);
}

       
   <div
      className="hand-grid-columns"
      id={`hand-grid-col-${i + 1}`}
      key={i}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      {hand.map((card,j) => {
        
          <HandGridData
            key={`${card.rank}${card.suit}`}
            card={card}
            player={i}
            trump={props.trump}
            share={props.share}
            forLayer={props.forLayer}
          />
        
      })}
    </div>

You could use flex layout. flexDirection style attribute would control the direction of elements within the div.

<!-- begin snippet: js hide: false console: true babel: true -->

<!-- language: lang-js -->

const App = ()=> {
  const noOfColumns = 3;
  const noOfRows = 4;
  const Box = () => {
    return (
      <div
        style={{
          backgroundColor: "white",
          marginTop: 2,
          border: "6px solid",
          width: 50,
          height: 50
        }}
      ></div>
    );
  };
  return (
    <div style={{ display: "flex", backgroundColor: "darkgray" }}>
      {[...Array(noOfColumns)].map((e, i) => (
        <div
        key={i}
          style={{
            marginRight: 10,
            marginTop: (i + 1) % 2 == 0 ? 15 : 0
          }}
        >
          {[...Array(noOfRows)].map((e, i) => (
            <Box 
        key={i}/>
          ))}
        </div>
      ))}
    </div>
  );
}


// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<!-- language: lang-html -->

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>

<!-- end snippet -->