CSS - Como hacer responsive un tablero de ajedrez

Como hacer responsive un tablero de ajedrez

Publicado por Arturo (7 intervenciones) el 11/10/2022 02:48:11

Buena tarde, disculpen, estoy haciendo una tarea y estamos trabajando en un proyecto de hacer un tablero de ajedrez funcional.

Resulta que el profesor me solicitó hacer un tablero de ajedrez en html con css, aun no le daremos color ni será interactivo, solo quiere los bordes y que sea responsive, que como algunos conocedores del tema pues ya saben que quiere que se adapte a cualquier tamaño de dispositivo.

Intente usar distintas propiedades pero no me da, el mejor resultado que he obtenido es este;

tablero

Mi código html es este:

<div id="tablero">

        <div class="fila8">

            <div class="escaque" id="57" data-casilla="a8"></div>

            <div class="escaque" id="58" data-casilla="b8"></div>

            <div class="escaque" id="59" data-casilla="c8"></div>

            <div class="escaque" id="60" data-casilla="d8"></div>

            <div class="escaque" id="61" data-casilla="e8"></div>

            <div class="escaque" id="62" data-casilla="f8"></div>

            <div class="escaque" id="63" data-casilla="g8"></div>

            <div class="escaque" id="64" data-casilla="h8"></div>

        </div>

        <div class="fila7">

            <div class="escaque" id="49" data-casilla="a7"></div>

            <div class="escaque" id="50" data-casilla="b7"></div>

            <div class="escaque" id="51" data-casilla="c7"></div>

            <div class="escaque" id="52" data-casilla="d7"></div>

            <div class="escaque" id="53" data-casilla="e7"></div>

            <div class="escaque" id="54" data-casilla="f7"></div>

            <div class="escaque" id="55" data-casilla="g7"></div>

            <div class="escaque" id="56" data-casilla="h7"></div>

        </div>

        <div class="fila6">

            <div class="escaque" id="41" data-casilla="a6"></div>

            <div class="escaque" id="42" data-casilla="b6"></div>

            <div class="escaque" id="43" data-casilla="c6"></div>

            <div class="escaque" id="44" data-casilla="d6"></div>

            <div class="escaque" id="45" data-casilla="e6"></div>

            <div class="escaque" id="46" data-casilla="f6"></div>

            <div class="escaque" id="47" data-casilla="g6"></div>

            <div class="escaque" id="48" data-casilla="h6"></div>

        </div>

        <div class="fila5">

            <div class="escaque" id="33" data-casilla="a5"></div>

            <div class="escaque" id="34" data-casilla="b5"></div>

            <div class="escaque" id="35" data-casilla="c5"></div>

            <div class="escaque" id="36" data-casilla="d5"></div>

            <div class="escaque" id="37" data-casilla="e5"></div>

            <div class="escaque" id="38" data-casilla="f5"></div>

            <div class="escaque" id="39" data-casilla="g5"></div>

            <div class="escaque" id="40" data-casilla="h5"></div>

        </div>

        <div class="fila4">

            <div class="escaque" id="25" data-casilla="a4"></div>

            <div class="escaque" id="26" data-casilla="b4"></div>

            <div class="escaque" id="27" data-casilla="c4"></div>

            <div class="eescaque" id="28" data-casilla="d4"></div>

            <div class="escaque" id="29" data-casilla="e4"></div>

            <div class="escaque" id="30" data-casilla="f4"></div>

            <div class="escaque" id="31" data-casilla="g4"></div>

            <div class="escaque" id="32" data-casilla="h4"></div>

        </div>

        <div class="fila3">

            <div class="escaque" id="17" data-casilla="a3"></div>

            <div class="escaque" id="18" data-casilla="b3"></div>

            <div class="escaque" id="19" data-casilla="c3"></div>

            <div class="escaque" id="20" data-casilla="d3"></div>

            <div class="escaque" id="21" data-casilla="e3"></div>

            <div class="escaque" id="22" data-casilla="f3"></div>

            <div class="escaque" id="23" data-casilla="g3"></div>

            <div class="escaque" id="24" data-casilla="h3"></div>

        </div>

        <div class="fila2">

            <div class="escaque" id="9" data-casilla="a2"></div>

            <div class="escaque" id="10" data-casilla="b2"></div>

            <div class="escaque" id="11" data-casilla="c2"></div>

            <div class="escaque" id="12" data-casilla="d2"></div>

            <div class="escaque" id="13" data-casilla="e2"></div>

            <div class="escaque" id="14" data-casilla="f2"></div>

            <div class="escaque" id="15" data-casilla="g2"></div>

            <div class="escaque" id="16" data-casilla="h2"></div>

        </div>

        <div class="fila1">

            <div class="escaque" id="1" data-casilla="a1"></div>

            <div class="escaque" id="2" data-casilla="b1"></div>

            <div class="escaque" id="3" data-casilla="c1"></div>

            <div class="escaque" id="4" data-casilla="d1"></div>

            <div class="escaque" id="5" data-casilla="e1"></div>

            <div class="escaque" id="6" data-casilla="f1"></div>

            <div class="escaque" id="7" data-casilla="g1"></div>

            <div class="escaque" id="8" data-casilla="h1"></div>

        </div>

    </div>

Y mi código CSS es este:

/* Estilo de interfaz de tablero */

 body #tablero {

  max-width: 800px;

  width: 95%;

  height: 800px;

  margin: auto;

  justify-content: center;

  display: flex;

  border-radius: 5px;

 body #tablero .escaque {

  width: 100px;

  height: 100px;

  border: black solid 1px;

¿Qué es lo que estoy haciendo mal o lo que me falta?

Desde ya, les agradezco su atención.

Saludos cordiales :)

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Como hacer responsive un tablero de ajedrez

Publicado por Arturo (7 intervenciones) el 11/10/2022 07:28:19

Pues modifique el código con el atributo grid y obtuve un buen resultado, el problema es que ahora el tablero de ajedrez no se centra en el cuerpo (body) de la página, ¿en que parte del código de CSS me estoy equivocando?

.tablerodeajedrez {

  position: relative;

  width: 100%;

  place-content: center;

  /* Ordenar las filas */

  .fila8, .fila7, .fila6, .fila5, .fila4, .fila3, .fila2, .fila1 {

  display: grid;

  place-content: center;

  grid-template-columns: repeat(auto-fill,minmax(100px, 1fr));

  grid-auto-rows: 100px;

Esto es lo que logré:

tablero

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Como hacer responsive un tablero de ajedrez

Publicado por Ivan (45 intervenciones) el 11/10/2022 21:36:25

Hola,

pues a simple vista diría que se te ha pasado los márgenes del tablero en auto.

Un saludo!

Valora esta respuesta

Comentar

Como hacer responsive un tablero de ajedrez

Publicado por Arturo (7 intervenciones) el 12/10/2022 02:40:17

Gracias por responder, ya lo pude centrar, además de un margen también necesitaba justificar el contenido, pero sigue sin ser responsive, ya que cambio el tamaño de la ventana y sigue sin ajustarse, se ve así si reduzco el tamaño de la ventana:

tablero

Pero si ajusto la ventana cuando esta maximizada hasta cierto rango de tamaño se ve bien;

tablero2

Pero el objetivo es que el tablero se vea así cuando pongo la ventana a tamaño mínimo:

tablero3

Revise la escala en mi meta, el código que tengo este;

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

Y creo que no está mal.

Sobre el código html, estas fueron mis modificaciones:

<!--Tablero de ajedrez-->

    <div id="tablero" class="tablerodeajedrez">

            <div class="escaque cuadro_claro" id="a8">8</div>

            <div class="escaque cuadro_oscuro" id="b8"></div>

            <div class="escaque cuadro_claro" id="c8"></div>

            <div class="escaque cuadro_oscuro" id="d8"></div>

            <div class="escaque cuadro_claro" id="e8"></div>

            <div class="escaque cuadro_oscuro" id="f8"></div>

            <div class="escaque cuadro_claro" id="g8"></div>

            <div class="escaque cuadro_oscuro" id="h8"></div>

            <div class="escaque cuadro_oscuro" id="a7">7</div>

            <div class="escaque cuadro_claro" id="b7"></div>

            <div class="escaque cuadro_oscuro" id="c7"></div>

            <div class="escaque cuadro_claro" id="d7"></div>

            <div class="escaque cuadro_oscuro" id="e7"></div>

            <div class="escaque cuadro_claro" id="f7"></div>

            <div class="escaque cuadro_oscuro" id="g7"></div>

            <div class="escaque cuadro_claro" id="h7"></div>

            <div class="escaque cuadro_claro" id="a6">6</div>

            <div class="escaque cuadro_oscuro" id="b6"></div>

            <div class="escaque cuadro_claro" id="c6"></div>

            <div class="escaque cuadro_oscuro" id="d6"></div>

            <div class="escaque cuadro_claro" id="e6"></div>

            <div class="escaque cuadro_oscuro" id="f6"></div>

            <div class="escaque cuadro_claro" id="g6"></div>

            <div class="escaque cuadro_oscuro" id="h6"></div>

            <div class="escaque cuadro_oscuro" id="a5">5</div>

            <div class="escaque cuadro_claro" id="b5"></div>

            <div class="escaque cuadro_oscuro" id="c5"></div>

            <div class="escaque cuadro_claro" id="d5"></div>

            <div class="escaque cuadro_oscuro" id="e5"></div>

            <div class="escaque cuadro_claro" id="f5"></div>

            <div class="escaque cuadro_oscuro" id="g5"></div>

            <div class="escaque cuadro_claro" id="h5"></div>

            <div class="escaque cuadro_claro" id="a4">4</div>

            <div class="escaque cuadro_oscuro" id="b4"></div>

            <div class="escaque cuadro_claro" id="c4"></div>

            <div class="escaque cuadro_oscuro" id="d4"></div>

            <div class="escaque cuadro_claro" id="e4"></div>

            <div class="escaque cuadro_oscuro" id="f4"></div>

            <div class="escaque cuadro_claro" id="g4"></div>

            <div class="escaque cuadro_oscuro" id="h4"></div>

            <div class="escaque cuadro_oscuro" id="a3">3</div>

            <div class="escaque cuadro_claro" id="b3"></div>

            <div class="escaque cuadro_oscuro" id="c3"></div>

            <div class="escaque cuadro_claro" id="d3"></div>

            <div class="escaque cuadro_oscuro" id="e3"></div>

            <div class="escaque cuadro_claro" id="f3"></div>

            <div class="escaque cuadro_oscuro" id="g3"></div>

            <div class="escaque cuadro_claro" id="h3"></div>

            <div class="escaque cuadro_claro" id="a2">2</div>

            <div class="escaque cuadro_oscuro" id="b2"></div>

            <div class="escaque cuadro_claro" id="c2"></div>

            <div class="escaque cuadro_oscuro" id="d2"></div>

            <div class="escaque cuadro_claro" id="e2"></div>

            <div class="escaque cuadro_oscuro" id="f2"></div>

            <div class="escaque cuadro_claro" id="g2"></div>

            <div class="escaque cuadro_oscuro" id="h2"></div>

            <div class="escaque cuadro_oscuro" id="a1"><a id="numero1">1</a><a id="letraA"></a>a</a></div>

            <div class="escaque cuadro_claro" id="b1">b</div>

            <div class="escaque cuadro_oscuro" id="c1">c</div>

            <div class="escaque cuadro_claro" id="d1">d</div>

            <div class="escaque cuadro_oscuro" id="e1">e</div>

            <div class="escaque cuadro_claro" id="f1">f</div>

            <div class="escaque cuadro_oscuro" id="g1">g</div>

            <div class="escaque cuadro_claro" id="h1">h</div>

    </div>

Y este es el código de mi CSS:

/* Estilo de interfaz de tablero */

.tablerodeajedrez {

font-family:Arial, Helvetica, sans-serif;

font-size: 15px;

font-weight: bold;

width: 90%;

margin: auto;

display: grid;

grid-template-columns: repeat(8, 100px);

grid-auto-rows: 100px;

justify-content: center;

Sigo sin entender bien, que es lo que estoy haciendo mal, mmmmmm....

¿Alguna idea?

Valora esta respuesta

Comentar

Como hacer responsive un tablero de ajedrez

Publicado por Ivan (45 intervenciones) el 12/10/2022 13:19:26

Hola,

conseguir que tu tablero "encoja" respecto al ancho es fácil, simplemente modificando esta linea:

grid-template-columns: repeat(8, 12.5%);

El verdadero problema es que tanto grid como flex como si usas float siempre tienen problemas a la hora de encoger "verticalmente".
Esto que con una imagen es fácil con height: auto (porque se conoce su alto, ancho) en tu caso es difícil, porque no conocemos el alto total del tablero y el flujo "natural" cuando se distribuyen los elementos HTML es de izquierda a derecha, teniendo en cuenta que el alto es indefinido.

Creo que una forma de hacerlo es con una tabla, un elemento que sí tiene en cuenta los altos de sus filas.

He buscado y encontrado un ejemplo aquí: https://codepen.io/Darkstron/post/tablero-de-ajedrez-usando-tablas-y-css

También puedes mirar el código de portales de ajedrez a ver si te da ideas.

O si alguien sabe cómo alinear verticalmente elementos flex/grid y hacerlos responsive pues será un gran aporte al foro.

Un saludo!

Valora esta respuesta

Comentar

Como hacer responsive un tablero de ajedrez

Publicado por Arturo (7 intervenciones) el 14/10/2022 06:26:02

Hola, buenas noches, le comento.

Estaba googleando información al respecto y resulta que se sugiere primero maquetar la página web, así que me puse a buscar mas información, encontré que hay muchas formas de maquetar, entre ellas con grid, le di focus a este tema y entre tantos tutoriales, encontré este:

Así que ahorita estoy maquetando como me gustaría mi página web, lo que ya logré es que sea responsive, pero eso aun no soluciona el problema, tengo que terminar de maquetar primero y después hacer pruebas con el enlace que me proporciono, así como de otras maneras.

Por el momento mi código html es este:

<!DOCTYPE html>

<html lang="es">

    <head>

        <meta charset="utf-8tf">

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

        <title>Pagina de prueba</title>

        <meta name="Ajedrez" content="Juega ajedrez online">

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

        <meta name="author" content="Creado por Arturo">

        <link rel="stylesheet" href="styles.css">

    </head>

<!--Asigne todo lo el front-end de la página al cuerpo (body), con una clase para que todo lo que vaya a poner se actualice segun los estilos que defina-->

    <body class="grid-container">

        <header class="header">Encabezado</header>

        <nav class="menu_principal">Menu</nav>

        <aside class="sidebar">Menu lateral</aside>

        <main class="interfaz">Ajedrez</main>

        <footer class="pie_de_pagina">Pie de página</footer>

    </body>

    </html>

</html>

Y mi código CSS es:

/* Importe una fuente de letra para la web por simple gusto */

@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

/* Lo normal que casi llevan todas las páginas */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

/* Estableci el html a 100% para que cada vez que se cambie el tamaño de la ventana, el contenido acapare toda la altura de la pagina */

html {

    height: 100%;

/* Le di un poco de estilo al cuerpo de la página */

body {

    font-family: "Montserrat", sans-serif;

    font-size: 1rem;

    min-height: 100%;

.header {

    grid-area: header;

    background-color: aqua;

.menu_principal {

    grid-area: menu_principal;

    background-color: yellow;

.sidebar {

    grid-area: sidebar;

    background-color: pink;

.interfaz {

    grid-area: interfaz;

    background-color: blueviolet;

.pie_de_pagina {

    grid-area: pie_de_pagina;

    background-color: brown;

.grid-container > * {

    box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);

    border-radius: 4px;

    padding: 10px;

    text-align: center;

.grid-container {

    display: grid;

    gap: 10px;

    grid-template:

    "header" 100px

    "menu_principal" 50px

    "sidebar" 50px

    "interfaz" auto

    "pie_de_pagina" 100px;

/* Esto modificara la pagina si se visualiza en una tablet */

@media (min-width: 600px) {

    .grid-container {

        grid-template:

        "header header" 100px

        "sidebar menu_principal" 50px

        "interfaz interfaz" auto

        "pie_de_pagina pie_de_pagina" 100px /

        200px auto;

/* Esto modificara la pagina si se visualiza en una laptop o desktop */

@media (min-width: 900px) {

    .grid-container {

        grid-template:

        "header header header" 100px

        "menu_principal menu_principal" 50px

        "sidebar interfaz" auto

        "pie_de_pagina pie_de_pagina" 100px /

        200px auto;

Prepararé algo y veré si surge alguna situación, porque como tal el problema de que el ajedrez sea responsive sigue latente porque aun no he logrado el objetivo, pero al parecer todo va bien por ahora, al menos no noto una forma de que no pueda funcionar por lo que se hasta ahorita.

Le daré seguimiento a este hilo y espero regresar con la respuesta definitiva para concluir el tema.

Desde ya, le agradezco su ayuda, muchas gracias, saludos

Valora esta respuesta

Comentar

Como hacer responsive un tablero de ajedrez

Publicado por Arturo (7 intervenciones) el 15/10/2022 08:36:18

Después de bastantes tutoriales y varias horas de lectura, vengo a comentar que lo logré, para esto tuve que maquetar, usar auto-fit, pseudo-elementos, y hacer varias pruebas de medidas, cabe mencionar que no es perfecto, me falta aun maquetar más, hacer mas ajustes a los tamaños para que se vea mejor, pero el tema de que el tablero de ajedrez sea responsive, funciona perfectamente, les comparto como se ve la versión para móviles:

tablero

Y bueno, les comparto el código como agradecimiento por dejarme publicar mi problema, el html es este;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

<!DOCTYPE html>

<html lang="es">

    <head>

        <meta charset="utf-8tf">

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

        <title>Pagina de prueba</title>

        <meta name="Ajedrez" content="Juega ajedrez online">

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

        <meta name="author" content="Creado por Arturo">

        <link rel="stylesheet" href="styles.css">

    </head>

<!--Asigne todo lo el front-end de la página al cuerpo (body), con una clase para que todo lo que vaya a poner se actualice segun los estilos que defina-->

    <body class="grid-container">

        <header class="header">Ajedrez</header>

        <nav class="menu_principal">Menu</nav>

        <aside class="sidebar">Menu lateral</aside>

        <main class="interfaz">

            <div class="grid_item foto_usuario_uno"><img href="#"> Foto </div>

            <div class="grid_item nick_name_uno">Nick name</div>

            <div class="grid_item tiempo_uno">Tiempo</div></div>

            <div class="grid_item tablero">

                <div class="fila1">

                    <div class="casilla blanca">1</div>

                    <div class="casilla negra">2</div>

                    <div class="casilla blanca">3</div>

                    <div class="casilla negra">4</div>

                    <div class="casilla blanca">5</div>

                    <div class="casilla negra">6</div>

                    <div class="casilla blanca">7</div>

                    <div class="casilla negra">8</div>

                </div>

                <div class="fila2">

                    <div class="casilla negra">9</div>

                    <div class="casilla blanca">10</div>

                    <div class="casilla negra">11</div>

                    <div class="casilla blanca">12</div>

                    <div class="casilla negra">13</div>

                    <div class="casilla blanca">14</div>

                    <div class="casilla negra">15</div>

                    <div class="casilla blanca">16</div>

                </div>

                <div class="fila3">

                    <div class="casilla blanca">17</div>

                    <div class="casilla negra">18</div>

                    <div class="casilla blanca">19</div>

                    <div class="casilla negra">20</div>

                    <div class="casilla blanca">21</div>

                    <div class="casilla negra">22</div>

                    <div class="casilla blanca">23</div>

                    <div class="casilla negra">24</div>

                </div>

                <div class="fila4">

                    <div class="casilla negra">25</div>

                    <div class="casilla blanca">26</div>

                    <div class="casilla negra">27</div>

                    <div class="casilla blanca">28</div>

                    <div class="casilla negra">29</div>

                    <div class="casilla blanca">30</div>

                    <div class="casilla negra">31</div>

                    <div class="casilla blanca">32</div>

                </div>

                <div class="fila5">

                    <div class="casilla blanca">33</div>

                    <div class="casilla negra">34</div>

                    <div class="casilla blanca">35</div>

                    <div class="casilla negra">36</div>

                    <div class="casilla blanca">37</div>

                    <div class="casilla negra">38</div>

                    <div class="casilla blanca">39</div>

                    <div class="casilla negra">40</div>

                </div>

                <div class="fila6">

                    <div class="casilla negra">41</div>

                    <div class="casilla blanca">42</div>

                    <div class="casilla negra">43</div>

                    <div class="casilla blanca">44</div>

                    <div class="casilla negra">45</div>

                    <div class="casilla blanca">46</div>

                    <div class="casilla negra">47</div>

                    <div class="casilla blanca">48</div>

                </div>

                <div class="fila7">

                    <div class="casilla blanca">49</div>

                    <div class="casilla negra">50</div>

                    <div class="casilla blanca">51</div>

                    <div class="casilla negra">52</div>

                    <div class="casilla blanca">53</div>

                    <div class="casilla negra">54</div>

                    <div class="casilla blanca">55</div>

                    <div class="casilla negra">56</div>

                </div>

                <div class="fila8">

                    <div class="casilla negra">57</div>

                    <div class="casilla blanca">58</div>

                    <div class="casilla negra">59</div>

                    <div class="casilla blanca">60</div>

                    <div class="casilla negra">61</div>

                    <div class="casilla blanca">62</div>

                    <div class="casilla negra">63</div>

                    <div class="casilla blanca">64</div>

                </div>

            </div>

            <div class="grid_item foto_usuario_dos"><img href="#">Foto</div>

            <div class="grid_item nick_name_dos">Nick name</div>

            <div class="grid_item tiempo_dos">Tiempo</div></div>

            </div>

        </main>

        <div class="chat">chat</div>

        <footer class="pie_de_pagina">Pie de página</footer>

    </body>

    </html>

</html>

Y mi código CSS es este:

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

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

/* Importe una fuente de letra para la web por simple gusto */

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

/* Lo normal que casi llevan todas las páginas */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

/* Estableci el html a 100% para que cada vez que se cambie el tamaño de la ventana, el contenido acapare toda la altura de la pagina */

html {

    height: 100%;

    width: 100%;

/* Le di un poco de estilo al cuerpo de la página */

body {

    font-family: "Anton", sans-serif;

    font-size: 1rem;

    min-height: 100%;

    width: 98%;

    margin:auto;

    background-color: rgb(36, 36, 36);

.header {

    grid-area: header;

    background-color: rgb(13, 142, 228);

    color: white;

.menu_principal {

    grid-area: menu_principal;

    background-color: rgb(214, 22, 221);

    color: white;

.sidebar {

    grid-area: sidebar;

    background-color: rgb(255, 231, 20);

    color: black;

.interfaz {

    grid-area: interfaz;

    color: white;

    /*Este elemento lo modifique porque es mi elemento donde se verá mi tablero de ajedrez */

    /* Repito el mismo proceso pero ahora para el tablero de ajedrez */

    display: grid;

    grid-template:

    "foto_usuario_uno nick_name_uno . tiempo_uno" 50px

    "tablero tablero tablero tablero" auto

    "foto_usuario_dos nick_name_dos . tiempo_dos" 50px

    / 70px 200px 50px auto;

    /* Esto lo hice para ver los bordes de los elementos y guiarme */

.interfaz > * {

    border-radius: 4px;

    padding: 10px;

    text-align: center;

.pie_de_pagina {

    grid-area: pie_de_pagina;

    background-color: rgb(64, 74, 209);

    color: white;

.chat {

    grid-area: chat;

    background-color:rgb(236, 33, 94);

    color: white;

.grid-container > * {

    box-shadow: -1px 1px 7px 0px rgba(0, 0, 0, 0.75);

    border-radius: 4px;

    padding: 10px;

    text-align: center;

.grid-container {

    display: grid;

    gap: 10px;

    grid-template:

    "header" 40px

    "menu_principal" 50px

    "sidebar" 50px

    "interfaz" auto

    "chat" 150px

    "pie_de_pagina" 70px ;

/* HASTA AQUÍ TERMINA EL DISEÑO DEL LAYOUT Y EMPIEZO CON EL DISEÑO DEL TABLERO DE AJEDREZ */

/* Organizo el tamaño de las casillas del tablero */

.tablero {

grid-area: tablero; /* Esto es para que al ajustar el contenido de la interfaz, haga focus sobre si mismo y se acomode */

width: 100%;

height: 100%;

/* Defino el tamaño minimo para las casillas en todas las filas */

.fila1, .fila2, .fila3, .fila4, .fila5, .fila6, .fila7, .fila8 {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));

    width: 90%;

    margin-right: 410px;

/* Aquí sucede la magia de la escala */

.fila1::before, .fila2::before, .fila3::before, .fila4::before, .fila5::before, .fila6::before, .fila7::before, .fila8::before {

    content: "";

    display: flex;

    height: 0;

    width: 0;

    padding-bottom: calc(1/1 * 100%);

/* Caracteristicas de las casillas */

.casilla{

    text-align: center;

    justify-content: center;

    align-items: center;

    border: 1px  solid black;

.blanca {

    background-color: orange;

.negra {

    background-color: black;

/* Esto es para que al ajustar el contenido de la interfaz, haga focus sobre si mismo y se acomode */

.foto_usuario_uno {

    grid-area: foto_usuario_uno;

    background-color: rgb(149, 202, 25);

.nick_name_uno {

    grid-area: nick_name_uno;

    background-color: rgb(226, 48, 17);

.tiempo_uno {

    grid-area: tiempo_uno;

    background-color: rgb(69, 30, 211);

.foto_usuario_dos {

    grid-area: foto_usuario_dos;

    background-color: rgb(149, 202, 25);

.nick_name_dos {

    grid-area: nick_name_dos;

    background-color: rgb(226, 48, 17);

.tiempo_dos {

    grid-area: tiempo_dos;

    background-color: rgb(69, 30, 211);

/* Hasta aquí ya se ve bien la página con dispositivos moviles */

/* Esto modificara todos los elementos de la pagina a escala de una tablet a excepción del tablero de ajedrez, ese ya quedó en el  .fila1::before, .fila2::before, .fila3::before, .fila4::before, .fila5::before, .fila6::before, .fila7::before, .fila8::before */

@media (min-width: 600px) {

    .grid-container {

        grid-template:

        "header header" 50px

        "menu_principal menu_principal" 50px

        "sidebar sidebar" 50px

        "interfaz interfaz" auto

        "chat chat" 120px

        "pie_de_pagina pie_de_pagina" 100px /

        auto 250px;

/* Esto modificara todos los elementos de la pagina a escala de una laptop o una computadora de escritorio a excepción del tablero de ajedrez, ese ya quedó en el  .fila1::before, .fila2::before, .fila3::before, .fila4::before, .fila5::before, .fila6::before, .fila7::before, .fila8::before */

@media (min-width: 900px) {

    .grid-container {

        grid-template:

        "header header header" 80px

        "menu_principal menu_principal menu_principal" 50px

        "sidebar interfaz chat" auto

        "pie_de_pagina pie_de_pagina pie_de_pagina" 80px /

        60px auto 280px;

De antemano muchas gracias Ivan, gracias a tu ayuda, indague más en el tema y encontré la solución, doy el tema por resuelto, saludos

Valora esta respuesta

Comentar

Se debe construir una pagina web que se vea como esta:

Fondo