Estoy trabajando en una aplicación simple de tres en raya con reaccionar y tengo este problema. Cuando el contenido/texto cambia dentro del elemento, estira su altura, pero cuando las 3 filas tienen contenido dentro, vuelve a la normalidad. Gracias de antemano.
enlace a este proyecto: https://codepen.io/Hakor/pen/LYdorey
mi 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; }¡Puede intentar agregar una aspect-ratio y mantener el cuadrado!
.square{ border: 1px solid black; display: flex; align-items: center; justify-content: center; font-size: 64px; aspect-ratio: 1; }Hay muchas formas de hacerlo, yo usaría esta:
.main-container{ grid-auto-rows: 33%; }Después de eso, puede establecer una 'brecha' adicional en .main-container para alinear su tabla o 'justificar-contenido'.
¡Espero que esto ayude! Saludos,