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;
}
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;
}
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,