setting the font-size makes the div bigger in a grid

i want to make a tic-tac-toe game in HTML/CSS/JS and i tried to raise the font-size but it raises the width/height of the div, and i cant set a width/height for the div because its in a grid.(if you have a better approach than this or images please leave a comment)

body{
    margin: 0;
    background-color: #E1D9D1;
}

#board{
    display: grid;
    grid-template-columns: auto auto auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 30vw;
    gap: 1vmin;
}

.square{
    font-family: 'Nunito', sans-serif;
    background-color: #252525;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 10vw;
    max-height: 10vw;
    font-size: 1vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>TicTacToe</title>
</head>
<body>
    
<div id="board">
    <div class="square">X</div>
    <div class="square">O</div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

</body>
</html>