Cómo elaborar un tablero de ajedrez en HTML y CSS flexbox y css-grid.

6175

Este va a ser un ajedrez de 8 x 8.

¿Cómo lo hice?

Definí un contenedor principal (.container), a este lo dividí en 8 filas (.item-container), y estas filas las dividí en 8 cuadros (.item).
El tamaño total de mi ajedrez es de 400px por 400px, este (.container) tendrá un display:flex y flex-direction:column para que los item-container estén ubicados uno bajo el otro (en una columna).
A las filas (item-container) les puse un display:inline-grid (hará las divisiones en 8 columnas) fraccionadas iguales con la opción grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; con una altura de 50px (para que me de 400px que el total del container)
Para los colores, utilicé las opciones :nth-child(even) y :nth-child(odd), para poder poner los fondos en negro/blanco negro/blanco …

El código quedó así:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            display: flex;
            height: 400px;
            width: 400px;
            background-color: aliceblue;
            flex-direction: column;
        }
        .item-container{
            height: 50px;
            width: 100%;
            display: inline-grid; 
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr;
        }

        .item-container:nth-child(even) .item:nth-child(even){
            background-color: black;
        }
        .item-container:nth-child(odd) .item:nth-child(odd){
            background-color: black;
        }
    </style>
</head>
<body>
    <divclass="container">
        <divclass="item-container">
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
        </div>
        <divclass="item-container">
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
        </div>
        <divclass="item-container">
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
        </div>
        <divclass="item-container">
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
        </div>
        <divclass="item-container">
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
        </div>
        <divclass="item-container">
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
        </div>
        <divclass="item-container">
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
        </div>
        <divclass="item-container">
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
            <divclass="item"></div>
        </div>
    </div>
    
</body>
</html>```

hace un año

Escribe tu comentario

+ 2

Entradas relacionadas

Cómo hacer un piano sencillo con dos teclas de color rosa usando HTML y CSS

En este tutorial te mostraré cómo crear un piano básico con dos teclas usando solo HTML y CSS. Las teclas serán de color rosa y, cuando haga

carozamb

Crea un Piano con Botones usando HTML y CSS

Hola! 😄 Acompáñame en este pequeño tutorial a través del cual construiremos el aspecto gráfico de un piano usando botones de HTML y estilos

robledocorrea

Domina la creación de tarjetas HTML y CSS: ¡Conviértete en un maestro de las 🃏 Cards en Frontend! 🚀

En este emocionante tutorial, vamos a sumergirnos en el fascinante mundo de la creación de tarjetas HTML y CSS. Si eres como yo, un apasiona

cpedrozamesa

Chat entre amigos

Bueno, para crear una figura de chat con html y CSS primero debes saber de que se tratará el mensaje. Haz un borrador de lo que el mensaj

malexandrecrespo