0

Disculpen, estoy tratando de hacer un tablero de ajedrez que sea responsive, y despues de varias consultas en internet y tutoriales, lo he logrado, pero tengo un inconveniente.

Resulta que el tablero de ajedrez si es responsive, pero se hace demasiado grande al maximizar la ventana del navegador, para que visualmente lo puedan apreciar, este es mi resultado:

Tablero de ajedrez responsive, visual y aparentemente se ve bien

Y como les mencionaba, el problema surge al maximizar la ventana, donde literalmente se expande demasiado, al grado que me sale un scrollbar:

Tablero de ajedrez responsive, visualmente ya no cuadra con la ventana de navegador

Lo que quiero averiguar, es ¿Qué propiedad o atributo sea en html o CSS debo utilizar para que el tamaño máximo del tablero de ajedrez se mantenga hasta cierto punto?

He buscado respuestas en internet pero no dan el resultado que quiero, y cuando lo dan, por lo general usan otros lenguajes de programación adicionales como javacript, python, jquery, etc. Sin embargo, mi reto es hacerlo solo con html y CSS.

Mi código CSS y html es este:

body {
    background-color: black;
}

/*Ordenando el tablero con grid */
.tablero_de_ajedrez {
    display: grid;
    grid-template: 
    "escaque_a8 escaque_b8 escaque_c8 escaque_d8 escaque_e8 escaque_f8 escaque_g8 escaque_h8"
    "escaque_a7 escaque_b7 escaque_c7 escaque_d7 escaque_e7 escaque_f7 escaque_g7 escaque_h7"
    "escaque_a6 escaque_b6 escaque_c6 escaque_d6 escaque_e6 escaque_f6 escaque_g6 escaque_h6"
    "escaque_a5 escaque_b5 escaque_c5 escaque_d5 escaque_e5 escaque_f5 escaque_g5 escaque_h5"
    "escaque_a4 escaque_b4 escaque_c4 escaque_d4 escaque_e4 escaque_f4 escaque_g4 escaque_h4"
    "escaque_a3 escaque_b3 escaque_c3 escaque_d3 escaque_e3 escaque_f3 escaque_g3 escaque_h3"
    "escaque_a2 escaque_b2 escaque_c2 escaque_d2 escaque_e2 escaque_f2 escaque_g2 escaque_h2"
    "escaque_a1 escaque_b1 escaque_c1 escaque_d1 escaque_e1 escaque_f1 escaque_g1 escaque_h1"
    / auto auto auto auto auto auto auto auto;
    aspect-ratio: 1/1;
    text-align: center;
}

/*Poniendole color a las casillas*/

.blanca {
    background-color: rgb(175, 198, 216);
}

.negra {
    background-color: rgb(93, 141, 81);
}
<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="styles.css">
    <body>
        <div  class="tablero_de_ajedrez">         
            <div class="casilla blanca escaque_a8">1</div>
            <div class="casilla negra escaque_b8">2</div>
            <div class="casilla blanca escaque_c8">3</div>
            <div class="casilla negra escaque_d8">4</div>
            <div class="casilla blanca escaque_e8">5</div>
            <div class="casilla negra escaque_f8">6</div>
            <div class="casilla blanca escaque_g8">7</div>
            <div class="casilla negra escaque_h8">8</div>
            <div class="casilla negra escaque_a7">9</div>
            <div class="casilla blanca escaque_b7">10</div>
            <div class="casilla negra escaque_c7">11</div>
            <div class="casilla blanca escaque_d7">12</div>
            <div class="casilla negra escaque_e7">13</div>
            <div class="casilla blanca escaque_f7">14</div>
            <div class="casilla negra escaque_g7">15</div>
            <div class="casilla blanca escaque_h7">16</div>
            <div class="casilla blanca escaque_a6">17</div>
            <div class="casilla negra escaque_b6">18</div>
            <div class="casilla blanca escaque_c6">19</div>
            <div class="casilla negra escaque_d6">20</div>
            <div class="casilla blanca escaque_e6">21</div>
            <div class="casilla negra escaque_f6">22</div>
            <div class="casilla blanca escaque_g6">23</div>
            <div class="casilla negra escaque_h6">24</div>
            <div class="casilla negra escaque_a5">25</div>
            <div class="casilla blanca escaque_b5">26</div>
            <div class="casilla negra escaque_c5">27</div>
            <div class="casilla blanca escaque_d5">28</div>
            <div class="casilla negra escaque_e5">29</div>
            <div class="casilla blanca escaque_f5">30</div>
            <div class="casilla negra escaque_g5">31</div>
            <div class="casilla blanca escaque_h5">32</div>
            <div class="casilla blanca escaque_a4">33</div>
            <div class="casilla negra escaque_b4">34</div>
            <div class="casilla blanca escaque_c4">35</div>
            <div class="casilla negra escaque_d4">36</div>
            <div class="casilla blanca escaque_e4">37</div>
            <div class="casilla negra escaque_f4">38</div>
            <div class="casilla blanca escaque_g4">39</div>
            <div class="casilla negra escaque_h4">40</div>
            <div class="casilla negra escaque_a3">41</div>
            <div class="casilla blanca escaque_b3">42</div>
            <div class="casilla negra escaque_c3">43</div>
            <div class="casilla blanca escaque_d3">44</div>
            <div class="casilla negra escaque_e3">45</div>
            <div class="casilla blanca escaque_f3">46</div>
            <div class="casilla negra escaque_g3">47</div>
            <div class="casilla blanca escaque_h3">48</div>
            <div class="casilla blanca escaque_a2">49</div>
            <div class="casilla negra escaque_b2">50</div>
            <div class="casilla blanca escaque_c2">51</div>
            <div class="casilla negra escaque_d2">52</div>
            <div class="casilla blanca escaque_e2">53</div>
            <div class="casilla negra escaque_f2">54</div>
            <div class="casilla blanca escaque_g2">55</div>
            <div class="casilla negra escaque_h2">56</div>
            <div class="casilla negra escaque_a1">57</div>
            <div class="casilla blanca escaque_b1">58</div>
            <div class="casilla negra escaque_c1">59</div>
            <div class="casilla blanca escaque_d1">60</div>
            <div class="casilla negra escaque_e1">61</div>
            <div class="casilla blanca escaque_f1">62</div>
            <div class="casilla negra escaque_g1">63</div>
            <div class="casilla blanca escaque_h1">64</div>                
        </div>
    </body>
</html>

Y por lo que tengo entendido, el problema es la clase ".tablero_de_ajedrez", ya que debería de tener la propiedad que defina el tamaño máximo, pero no encuentro una solución a mi problema que no tenga que ver con combinar otro lenguaje de programación.

Desde ya, les agradezco su atención, ojala alguien me pueda ayudar.

Saludos cordiales y gracias :)

5
  • probaste con max-width y max-height ?
    – Yussef
    Commented el 22 oct. 2022 a las 1:43
  • Lo intenté, pero el problema que me da, es que cuando minimizo la página, se hace bastante pequeño, literalmente agregando en el CSS el código: margin: auto; max-width: 50%; max-height: 50%; Pero no me funciona :(
    – Corso94
    Commented el 22 oct. 2022 a las 1:55
  • y algo como max-height: 90vh; (sin colocar max-width)
    – Yussef
    Commented el 22 oct. 2022 a las 2:12
  • no uses un max en porcentaje, mejor usa en px, por ejemplo, width: 90%; max-width: 800px; Commented el 22 oct. 2022 a las 2:15
  • Muchas gracias a ambos, ambas respuestas son correctas, pero para mis necesidades se adapta mejor la de Yussef, te lo agradezco enormemente. Ahora me pondré a estudiar mas las propiedades width y height además de las unidades de medida, pensé que el vh y el % eran iguales, pero ya veo que no, sus funciones son diferentes. Gracias nuevamente Yussef :D
    – Corso94
    Commented el 22 oct. 2022 a las 2:28

2 respuestas 2

1

Permíteme cambiar un poco tu código

  1. No necesitas ocupar areas en el grid, basta que le coloques
grid-template-columns: repeat(8,1fr);
grid-template-rows: repeat(8,1fr);
  1. Tampoco es necesario colocar div con la clase blanca y negra. Puedes colocar un fondo que cumpla con un patron
background: repeating-conic-gradient(#afc6d8 0% 25%, #5d8d51 0% 50%) 50% / 25% 25%;
  1. Para colocar el número de celda se puede hacer con css
.tablero_de_ajedrez div::after {
        text-align: center;
        width: 100%;
        counter-increment: celda;
        content: counter(celda);
        display: inline-block;
    }
  1. Para crear los 64 div puedes ocupar un poco de javascript, de lo contrario queda un código enorme
<div class="tablero_de_ajedrez"> 
    <script>
        for(let i=0; i<64; i++){
            document.write(`<div></div>`);
        }
    </script>
</div>
  1. Para el problema de que sea responsivo, tal como te dije en los comentarios, lo más fácil es limitar la altura. Puedes hacer algo como
max-height: calc(100vh - 30px);

Donde los 30px serían un borde fijo que dejarías. También puede ser la altura de un menú superior que estuvieras ocupando

Entonces tu código completo sería este:

.tablero_de_ajedrez {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: repeat(8,1fr);
    aspect-ratio: 1;
    max-height: calc(100vh - 10px);
    background: repeating-conic-gradient(#afc6d8 0% 25%, #5d8d51 0% 50%) 50% / 25% 25%;
    counter-reset: celda;
}
.tablero_de_ajedrez div::after {
    text-align: center;
    width: 100%;
    counter-increment: celda;
    content: counter(celda);
    display: inline-block;
}
<div class="tablero_de_ajedrez"> 
    <script>
        for(let i=0; i<64; i++){
            document.write(`<div></div>`);
        }
    </script>
</div>

Como podrás ver es bastante más corto

2
  • Muchas gracias, estudiare todo el código, de momento va de maravilla, ando ahorita en nivel intermedio de javascript,, ya llegaré a este punto, mientras guardare esta respuesta a favoritos, muchas gracias :D
    – Corso94
    Commented el 22 oct. 2022 a las 2:54
  • Ok, en todo caso yo solo usé javascript para repetir los 64 divs, el resto es solo css. Suerte con tu proyecto!!!
    – Yussef
    Commented el 22 oct. 2022 a las 2:56
0

Prueba con este ratio

body {
    background-color: black;
}

/*Ordenando el tablero con grid */
.tablero_de_ajedrez {
    display: grid;
    grid-template: 
    "escaque_a8 escaque_b8 escaque_c8 escaque_d8 escaque_e8 escaque_f8 escaque_g8 escaque_h8"
    "escaque_a7 escaque_b7 escaque_c7 escaque_d7 escaque_e7 escaque_f7 escaque_g7 escaque_h7"
    "escaque_a6 escaque_b6 escaque_c6 escaque_d6 escaque_e6 escaque_f6 escaque_g6 escaque_h6"
    "escaque_a5 escaque_b5 escaque_c5 escaque_d5 escaque_e5 escaque_f5 escaque_g5 escaque_h5"
    "escaque_a4 escaque_b4 escaque_c4 escaque_d4 escaque_e4 escaque_f4 escaque_g4 escaque_h4"
    "escaque_a3 escaque_b3 escaque_c3 escaque_d3 escaque_e3 escaque_f3 escaque_g3 escaque_h3"
    "escaque_a2 escaque_b2 escaque_c2 escaque_d2 escaque_e2 escaque_f2 escaque_g2 escaque_h2"
    "escaque_a1 escaque_b1 escaque_c1 escaque_d1 escaque_e1 escaque_f1 escaque_g1 escaque_h1"
    / auto auto auto auto auto auto auto auto;
    
aspect-ratio: 2.191/1;

    text-align: center;
}

/*Poniendole color a las casillas*/

.blanca {
    background-color: rgb(175, 198, 216);
}

.negra {
    background-color: rgb(93, 141, 81);
}
<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="styles.css">
    <body>
        <div  class="tablero_de_ajedrez">         
            <div class="casilla blanca escaque_a8">1</div>
            <div class="casilla negra escaque_b8">2</div>
            <div class="casilla blanca escaque_c8">3</div>
            <div class="casilla negra escaque_d8">4</div>
            <div class="casilla blanca escaque_e8">5</div>
            <div class="casilla negra escaque_f8">6</div>
            <div class="casilla blanca escaque_g8">7</div>
            <div class="casilla negra escaque_h8">8</div>
            <div class="casilla negra escaque_a7">9</div>
            <div class="casilla blanca escaque_b7">10</div>
            <div class="casilla negra escaque_c7">11</div>
            <div class="casilla blanca escaque_d7">12</div>
            <div class="casilla negra escaque_e7">13</div>
            <div class="casilla blanca escaque_f7">14</div>
            <div class="casilla negra escaque_g7">15</div>
            <div class="casilla blanca escaque_h7">16</div>
            <div class="casilla blanca escaque_a6">17</div>
            <div class="casilla negra escaque_b6">18</div>
            <div class="casilla blanca escaque_c6">19</div>
            <div class="casilla negra escaque_d6">20</div>
            <div class="casilla blanca escaque_e6">21</div>
            <div class="casilla negra escaque_f6">22</div>
            <div class="casilla blanca escaque_g6">23</div>
            <div class="casilla negra escaque_h6">24</div>
            <div class="casilla negra escaque_a5">25</div>
            <div class="casilla blanca escaque_b5">26</div>
            <div class="casilla negra escaque_c5">27</div>
            <div class="casilla blanca escaque_d5">28</div>
            <div class="casilla negra escaque_e5">29</div>
            <div class="casilla blanca escaque_f5">30</div>
            <div class="casilla negra escaque_g5">31</div>
            <div class="casilla blanca escaque_h5">32</div>
            <div class="casilla blanca escaque_a4">33</div>
            <div class="casilla negra escaque_b4">34</div>
            <div class="casilla blanca escaque_c4">35</div>
            <div class="casilla negra escaque_d4">36</div>
            <div class="casilla blanca escaque_e4">37</div>
            <div class="casilla negra escaque_f4">38</div>
            <div class="casilla blanca escaque_g4">39</div>
            <div class="casilla negra escaque_h4">40</div>
            <div class="casilla negra escaque_a3">41</div>
            <div class="casilla blanca escaque_b3">42</div>
            <div class="casilla negra escaque_c3">43</div>
            <div class="casilla blanca escaque_d3">44</div>
            <div class="casilla negra escaque_e3">45</div>
            <div class="casilla blanca escaque_f3">46</div>
            <div class="casilla negra escaque_g3">47</div>
            <div class="casilla blanca escaque_h3">48</div>
            <div class="casilla blanca escaque_a2">49</div>
            <div class="casilla negra escaque_b2">50</div>
            <div class="casilla blanca escaque_c2">51</div>
            <div class="casilla negra escaque_d2">52</div>
            <div class="casilla blanca escaque_e2">53</div>
            <div class="casilla negra escaque_f2">54</div>
            <div class="casilla blanca escaque_g2">55</div>
            <div class="casilla negra escaque_h2">56</div>
            <div class="casilla negra escaque_a1">57</div>
            <div class="casilla blanca escaque_b1">58</div>
            <div class="casilla negra escaque_c1">59</div>
            <div class="casilla blanca escaque_d1">60</div>
            <div class="casilla negra escaque_e1">61</div>
            <div class="casilla blanca escaque_f1">62</div>
            <div class="casilla negra escaque_g1">63</div>
            <div class="casilla blanca escaque_h1">64</div>                
        </div>
    </body>
</html>

1
  • Hola, gracias por responder, el código que proporcionaste hace las casillas rectangulares, la solución la mencionó Yussef,, solo era agregar "max-height: 90vh;" en el CSS ".tablero_de_ajedrez" como propiedad y asunto resulto, de igual manera lo que proporcionaste es una solución a otras necesidades bro, gracias por tomarte la molestia, muchas gracias :D
    – Corso94
    Commented el 22 oct. 2022 a las 2:51

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.