CSS grid: element resizes when content is put into in-CodePudding

I am working on a simple tic-tac-toe app with react and I have this problem. When content/text changes inside element it stretches its height, but when all 3 rows have content inside it sets back to normal. Thank you in advance.

link to this project: https://codepen.io/Hakor/pen/LYdorey

my CSS:

.main-container{
    width: 500px;
    height: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border: 1px solid black;
}
.square{
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
}

CodePudding user response：

You can try adding an aspect-ratio and maintain the square!

.square{
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    aspect-ratio: 1;
}

codepen

CodePudding user response：

There are many ways to do this, I would use this one:

.main-container{
    grid-auto-rows: 33%;
}

After that you may set additional 'gap' in .main-container to align your table or 'justify-content'.

Hope this helps! Regards,