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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

lang="en">

charset="UTF-8">

http-equiv="X-UA-Compatible" content="IE=edge">

name="viewport" content="width=device-width, initial-scale=1.0">

</span><span class="crayon-i ">Tablero ajedrez</span><span class="crayon-r ">

rel="stylesheet" href="./includes/css/style.css">

class="wrapper">

class="item">

src="./includes/img/black-rook.png" alt="black-rook">

class="item">

src="./includes/img/black-horse.png" alt="black-horse">

class="item">

src="./includes/img/black-bishop.png" alt="black-bishop">

class="item">

src="./includes/img/black-queen.png" alt="black-queen">

class="item">

src="./includes/img/black-king.png" alt="black-king">

class="item">

src="./includes/img/black-bishop.png" alt="black-bishop">

class="item">

src="./includes/img/black-horse.png" alt="black-horse">

class="item">

src="./includes/img/black-rook.png" alt="black-rook">

class="item">

src="./includes/img/black-pawn.png" alt="black-pawn">

class="item">

src="./includes/img/black-pawn.png" alt="black-pawn">

class="item">

src="./includes/img/black-pawn.png" alt="black-pawn">

class="item">

src="./includes/img/black-pawn.png" alt="black-pawn">

class="item">

src="./includes/img/black-pawn.png" alt="black-pawn">

class="item">

src="./includes/img/black-pawn.png" alt="black-pawn">

class="item">

src="./includes/img/black-pawn.png" alt="black-pawn">

class="item">

src="./includes/img/black-pawn.png" alt="black-pawn">

class="item">