Hey, I'm trying to make a tictactoe game and I want the board to be able to be sized however the user wants, the actual rendering of the board is pretty simple, just some slight math and variable passing to size the arrays correctly before mapping. However, I want my board to correctly have the number of rows. The tutorial I'm following has this data hard coded by setting the arrays inside of the board component to just simply 9 then in the globals.css he displays the board by using:

.grid {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(3);
}

The issue is that because my board can be resized to have however many rows across I can't really have a hardcoded repeat(3) here, I want it to have this variable defined inside of my board component (if possible):

//Inside of page.tsx
<Board boardSize={3} />


//Board.tsx {Not full code}

//Board is defined simular to this:
//I could have the value variable inside of the classnames here, have a standard for grid, then change the repeat depending on if the classname is grid_3 or grid_4 etc, but that only works for defined?
<div className="board grid">
          {Array(boardSize * boardSize)
            .fill(null)
            .map((_, i) => {
              return (
//Square component, ignore this shii
                <Square
                  winner={winner}
                  key={i}
                  onClick={() => {
                    setSquareValue(i);
                  }}
                  value={squares[i]}
                />
              );
            })}
        </div>

what can I do besides just having a global grid css style that is set to set the styles for grid and individual classes for how many times it reapeats? is there anything I can do in this situation?
Thank you in advance for any and all input! It's very greatly appreciated