Estoy haciendo el maquetado de una interfaz para un tablero de ajedrez. Por el momento la versión para móviles va muy bien, pero al maximizar la ventana, hay un espacio en blanco entre la segunda y tercera sección, literalmente se ve así:
Por otro lado, quisiera que la primera y tercera sección se ajustaran a lo ancho de la segunda, o sea, en la versión para móviles se ve así:
Pero al maximizar la ventana, las secciones rojas, son disparejas al tablero. Literalmente me gustaría que todo quedara en un cuadrado, donde el tablero defina el tamaño de la primera y tercera sección:
Por lo que he investigado, todo podría quedar en una sola sección, y me puse manos a la obra pero termino con el mismo resultado. No sé qué estoy haciendo mal. Adjunto mi código:
.perfil2 {
grid-area: perfil2;
display: flex;
background-color: #af3232;
font-family: "Montserrat Alternates", sans-serif;
align-items: center;
border-radius: 4px;
}
.tablero {
grid-area: tablero;
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 1fr);
background: repeating-conic-gradient(#c54411 0% 25%, #afc6d8 0% 50%) 50% / 25% 25%; /* Esto define el color de las casillas */
aspect-ratio: 1/1;
max-height: calc(100vh - 200px);
align-items: center;
justify-content: center;
text-align: center;
border: thin 1px solid;
margin: 0 auto;
}
.perfil1 {
grid-area: perfil1;
display: flex;
background-color: #af3232;
font-family: "Montserrat Alternates", sans-serif;
align-items: center;
border-radius: 4px;
}
<section class="perfil2">
<div><img class="foto2" src="#" href="#"></div>
<div class="nick2"><a>Nick</a></div>
<div class="tiempo2">Tiempo2</div>
</section>
<section class="tablero">
<div class="box">♜</div>
<div class="box">♞</div>
<div class="box">♝</div>
<div class="box">♛</div>
<div class="box">♚</div>
<div class="box">♝</div>
<div class="box">♞</div>
<div class="box">♜</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♜</div>
<div class="box">♞</div>
<div class="box">♝</div>
<div class="box">♛</div>
<div class="box">♚</div>
<div class="box">♝</div>
<div class="box">♞</div>
<div class="box">♜</div>
</section>
<section class="perfil1">
<div><img class="foto1" src="#" href="#"></div>
<div class="nick1"><a>Nick</a></div>
<div class="tiempo1">Tiempo1</div>
</section>
Revisando unas configuraciones de la página web, resulta que tenía un height demás en la propiedad del body.
body {
height: 100%;
background-color: rgb(20, 82, 124); }
Lo único que hice fue eliminar el height, ya que este determinaba que todos los elementos dentro del body iban a estar en su altura máxima del cuerpo. Al eliminarlo, todos los elementos se ajustan a su contenido.
Esta pequeña parte como bien lo mencionaba, la solucioné, quitando el "height", quedando únicamente:
body {
background-color: rgb(20, 82, 124); }
Aún falta que los otros dos elementos div denominados como perfil2 y perfil1 (los divs de color rojo) se adapten a lo ancho del tablero de ajedrez.
Solo comparto esto para darle un seguimiento al tema.