CSS Grid – Crea tu propio tablero de ajedrez

03/07/20230 comentarios

Hola a todos, hoy os voy a explicar como podemos crear un tablero de ajedrez con CSS Grid paso a paso.

Una buena práctica para CSS es hacer un tablero de ajedrez con todas sus piezas como imágenes, en nuestro caso lo vamos a hacer usando CSS Grid.

Base de nuestro tablero CSS Grid

Esta será nuestra estructura base:

Te dejo la base en github. Incluye las imágenes.

HTML

Lo primero es ponernos con la parte del HTML, esta parte es sencilla.

Tendremos una clase wrapper donde lo definiremos como un grid.

Después, tendremos 64 divs (8×8) con la clase item y en algunos de ellos, le pondremos la imagen asociada.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tablero ajedrez</title>
    <link rel="stylesheet" href="./includes/css/style.css">
</head>

<body>

    <div class="wrapper">
        <div class="item">
            <img src="./includes/img/black-rook.png" alt="black-rook">
        </div>
        <div class="item">
            <img src="./includes/img/black-horse.png" alt="black-horse">
        </div>
        <div class="item">
            <img src="./includes/img/black-bishop.png" alt="black-bishop">
        </div>
        <div class="item">
            <img src="./includes/img/black-queen.png" alt="black-queen">
        </div>
        <div class="item">
            <img src="./includes/img/black-king.png" alt="black-king">
        </div>
        <div class="item">
            <img src="./includes/img/black-bishop.png" alt="black-bishop">
        </div>
        <div class="item">
            <img src="./includes/img/black-horse.png" alt="black-horse">
        </div>
        <div class="item">
            <img src="./includes/img/black-rook.png" alt="black-rook">
        </div>
        <div class="item">
            <img src="./includes/img/black-pawn.png" alt="black-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/black-pawn.png" alt="black-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/black-pawn.png" alt="black-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/black-pawn.png" alt="black-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/black-pawn.png" alt="black-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/black-pawn.png" alt="black-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/black-pawn.png" alt="black-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/black-pawn.png" alt="black-pawn">
        </div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item">
            <img src="./includes/img/white-pawn.png" alt="white-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/white-pawn.png" alt="white-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/white-pawn.png" alt="white-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/white-pawn.png" alt="white-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/white-pawn.png" alt="white-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/white-pawn.png" alt="white-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/white-pawn.png" alt="white-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/white-pawn.png" alt="white-pawn">
        </div>
        <div class="item">
            <img src="./includes/img/white-rook.png" alt="white-rook">
        </div>
        <div class="item">
            <img src="./includes/img/white-horse.png" alt="white-horse">
        </div>
        <div class="item">
            <img src="./includes/img/white-bishop.png" alt="white-bishop">
        </div>
        <div class="item">
            <img src="./includes/img/white-queen.png" alt="white-queen">
        </div>
        <div class="item">
            <img src="./includes/img/white-king.png" alt="white-king">
        </div>
        <div class="item">
            <img src="./includes/img/white-bishop.png" alt="white-bishop">
        </div>
        <div class="item">
            <img src="./includes/img/white-horse.png" alt="white-horse">
        </div>
        <div class="item">
            <img src="./includes/img/white-rook.png" alt="white-rook">
        </div>
    </div>

</body>

</html>

CSS Grid

Vamos con el CSS, como hemos dicho, la clase wrapper le pondremos un display grid, además le definiremos sus filas y columnas.

Usando la función repeat le indicamos que el numero de filas o columnas y su medida, en nuestro caso, 1fr que es util para responsive.

La propiedad gap nos da un poco de espacio entre las casillas.

body {
    margin: 40px;
}

.wrapper{
    display: grid;
    grid-template-rows: repeat(8, 1fr);
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
}

.item {
    background-color: #ccc;
    padding: 5px;
    border-radius: 4px;
    text-align: center;
}
.item img {
    max-width: 100%;
}

Así se nos queda de momento.

Coloreando nuestro tablero CSS Grid

Solo nos queda ir alternando de color en las casillas, ¿Cuál es el problema? Que no hay un patrón fijo ya que en algunas empiezan en negro y otras en blanco.

Empecemos con la primera fila, en nuestro CSS le agregamos lo siguiente:


div.item:nth-child(-2n+8) {
    background-color: #000;
}

Este es el resultado:

¿Porque -2n+8? Significa que empieza desde el final hasta el principio, el truco esta en cambiar el n por 0,1,2,3,etc. hasta que sea negativo o cero el resultado, por ejemplo:

(n=0) -2 * 0 + 8 = 8

(n=1) -2 * 1 + 8 = 6

(n=2) -2 * 2 + 8 = 4

(n=3) -2 * 3 + 8 = 2

(n=4) -2 * 4 + 8 = 0 (ya no se muestra)

Para la segunda fila es parecido pero tenemos que indicarle que no pase a la anterior fila. Lo podemos hacer con un selector hermano.

div.item:nth-child(-2n+8),
div.item:nth-child(8) ~ div.item:nth-child(-2n+15) {
    background-color: #000;
}

Le estoy diciendo que solo afecte a aquellos que estén por delante del div numero 8, también usamos la misma formular pero no seria 16 sino 15.

Este es el resultado:

Mismo calculo:

(n=0) -2 * 0 + 15 = 15

(n=1) -2 * 1 + 15 = 13

(n=2) -2 * 2 + 15 = 11

(n=3) -2 * 3 + 15 = 9

(n=4) -2 * 4 + 15 = 7 (con el selector de hermano, no lo pinta)

Y así seria con el resto de filas, haciendo uno más y otro menos.


div.item:nth-child(-2n+8), /* 1 fila */
div.item:nth-child(8) ~ div.item:nth-child(-2n+15), /* 2 fila */
div.item:nth-child(16) ~ div.item:nth-child(-2n+24), /* 3 fila */
div.item:nth-child(24) ~ div.item:nth-child(-2n+31), /* 4 fila */
div.item:nth-child(32) ~ div.item:nth-child(-2n+40), /* 5 fila */
div.item:nth-child(40) ~ div.item:nth-child(-2n+47), /* 6 fila */
div.item:nth-child(48) ~ div.item:nth-child(-2n+56), /* 7 fila */
div.item:nth-child(56) ~ div.item:nth-child(-2n+63){ /* 8 fila */
    background-color: #000;
}