{"id":14603,"date":"2023-06-16T12:53:49","date_gmt":"2023-06-16T10:53:49","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=14603"},"modified":"2023-06-19T08:19:24","modified_gmt":"2023-06-19T06:19:24","slug":"tablero-ajedrez-html-grid-layout-css","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/","title":{"rendered":"Crea un Tablero de Ajedrez con HTML y Grid Layout CSS"},"content":{"rendered":"

Hoy vamos a sumergirnos en el fascinante mundo del dise\u00f1o web y en particular, vamos a explorar c\u00f3mo crear un tablero de ajedrez utilizando HTML y el poderoso Grid Layout CSS<\/strong>.<\/a><\/p>\n

En este art\u00edculo, te guiar\u00e9 paso a paso a trav\u00e9s del proceso de creaci\u00f3n del tablero de ajedrez con HTML y\u00a0 Grid Layout. Exploraremos c\u00f3mo estructurar el HTML, aplicar estilos con CSS y crear una cuadr\u00edcula que se adapte perfectamente a nuestras necesidades.<\/p>\n

\u00a1Comencemos a dise\u00f1ar nuestro tablero de ajedrez con HTML y Grid Layout CSS!<\/p>\n

Descubre el poder de Grid Layout CSS<\/h2>\n

El Grid Layout es una de las caracter\u00edsticas m\u00e1s emocionantes de CSS, ya que nos permite crear dise\u00f1os de manera m\u00e1s eficiente y flexible. Es perfecto para organizar elementos en forma de cuadr\u00edcula, como un tablero de ajedrez. Este proyecto es un excelente ejercicio para familiarizarse con Grid Layout y aprovechar al m\u00e1ximo su potencial.<\/p>\n

Como conseguir las piezas del juego<\/h2>\n

Pero antes de sumergirnos en el c\u00f3digo, necesitamos las piezas del juego de ajedrez.<\/strong> \u00a1No te preocupes! He encontrado una lista de s\u00edmbolos Unicode para las piezas de ajedrez<\/a> en la web de Wikipedia . Estos s\u00edmbolos nos permitir\u00e1n representar las piezas en el tablero de manera elegante y sencilla.<\/p>\n

Una vez que hayamos obtenido los s\u00edmbolos Unicode correspondientes a cada pieza de ajedrez (por ejemplo, \u2654 para el rey blanco, \u2655 para la reina blanca, \u2656 para la torre blanca, etc.), podremos utilizarlos en nuestro c\u00f3digo HTML para mostrar las piezas en las casillas del tablero.<\/p>\n

En el c\u00f3digo HTML de tu tablero de ajedrez, puedemos utilizar elementos <div><\/code> para representar cada casilla del tablero. Dentro de cada casilla, puedemos utilizar el s\u00edmbolo Unicode correspondiente a la pieza de ajedrez. Por ejemplo:<\/p>\n

<div class=\"box\">\u2656<\/div>\r\n<!-- Torre blanca --><\/pre>\n
En el ejemplo anterior, utilizamos el s\u00edmbolo Unicode \u2656 para representar una torre blanca en una casilla del tablero. Puedes hacer lo mismo para las dem\u00e1s piezas del ajedrez, utilizando los s\u00edmbolos Unicode apropiados.<\/p>\n
Luego, puedes aplicar estilos CSS a los s\u00edmbolos\u00a0para definir el tama\u00f1o, color, y cualquier otra propiedad visual que desees para las piezas del tablero.<\/p>\n
Estructura del tablero de ajedrez en HTML<\/h2>\n
Ahora que tenemos los s\u00edmbolos Unicode y estamos listos para dar vida a nuestro tablero de ajedrez, es hora de poner manos a la obra y crear la estructura del tablero utilizando HTML y aprovechando el poderoso Grid Layout CSS.<\/p>\n
El Grid Layout CSS nos permite organizar los elementos en una cuadr\u00edcula, y en nuestro caso, esta cuadr\u00edcula ser\u00e1 nuestro tablero de ajedrez. La ventaja de utilizar Grid Layout es que nos brinda un control total sobre la disposici\u00f3n y el posicionamiento<\/strong> de las casillas y las piezas en el tablero.<\/p>\n
Para comenzar, crearemos un elemento contenedor que englobe todo el tablero. Podemos utilizar un <div><\/code> con la clase \u00abcontainer\u00bb para este prop\u00f3sito:<\/p>\n
\n
<div<\/span> id<\/span>=\"container-board\"<\/span>><\/span><\/code> <!-- Aqu\u00ed ir\u00e1 el tablero de ajedrez --><\/span><\/code> <\/div<\/span>><\/span>\r\n<\/code><\/pre>\n<\/div>\n
Dentro del contenedor, crearemos un elemento <section><\/code> con la clase \u00abboard\u00bb para representar el tablero en s\u00ed mismo. Es dentro de este elemento donde construiremos nuestra cuadr\u00edcula utilizando Grid Layout:<\/p>\n
<div id=\"container-board\">\r\n     <section id=\"board\"><!-- Aqu\u00ed ir\u00e1 la cuadr\u00edcula del tablero --><\/section>\r\n<\/div><\/pre>\n
Ahora, necesitamos representar las casillas del tablero utilizando elementos <div><\/code> con la clase \u00abbox\u00bb. Cada casilla del tablero ser\u00e1 un elemento <div><\/code> individual:<\/p>\n
<div id=\"container-board\">\r\n     <section id=\"board\">\r\n          <div class=\"box\"><\/div> <!-- Casilla 1 -->\r\n          <div class=\"box\"><\/div> <!-- Casilla 2 -->\r\n          <!-- ... Repetir para las dem\u00e1s casillas ... -->\r\n     <\/section>\r\n<\/div><\/pre>\n
Es importante destacar que en este punto, solo hemos creado la estructura b\u00e1sica del tablero con las casillas vac\u00edas. En los siguientes pasos, definiremos las dimensiones, el color y la posici\u00f3n de las casillas utilizando CSS y Grid Layout.<\/p>\n
Estilizaci\u00f3n del tablero con CSS<\/h2>\n
Para comenzar, vamos a establecer las dimensiones del tablero y las casillas. Esto se logra utilizando las propiedades de Grid Layout CSS. En el archivo de estilos CSS, podemos aplicar las siguientes reglas:<\/p>\n
#container-board {\r\n   max-width: 1200px; \/* Ancho del tablero *\/\r\n}\r\n\r\n#board {\r\n   display: grid;\r\n   grid-template-columns: repeat(8, 1fr); \/* 8 columnas iguales en el tablero *\/\r\n   grid-template-rows: repeat(8, 1fr); \/* 8 filas en el tablero *\/\r\n}\r\n\r\n.box {\r\n   background-color: #EBEBD0; \/* Color de fondo de las casillas *\/\r\n   display: flex;\r\n   justify-content: center;\r\n   align-items: center;\r\n   font-size: 4em; \/* Tama\u00f1o de la fuente de las piezas *\/\r\n}<\/pre>\n
En el c\u00f3digo anterior, establecemos el ancho y la altura del tablero, as\u00ed como el n\u00famero de columnas y filas utilizando Grid Layout. Adem\u00e1s, aplicamos un color de fondo a las casillas y centramos verticalmente y horizontalmente el contenido de las casillas utilizando flexbox.<\/p>\n
Ahora, es el momento de agregar las piezas de ajedrez utilizando los s\u00edmbolos Unicode que obtuvimos anteriormente.\u00a0 Y de poner un color de fondo a las casillas de manera alternativa. En el archivo de estilos CSS, podemos definir las propiedades de las casillas utilizando selectores de pseudo-classe:<\/p>\n
.box{\r\n   color:#56483b; \/* Color de las piezas *\/\r\n}\r\n.box:nth-child(2n+1){\r\n   background-color: #759652; \/*Se cambia el color de fondo de todas las casillas impares*\/ \r\n}\r\n.box:nth-child(2n+9){\r\n   background-color: #EBEBD0; \/*Se cambia el color de fondo de todas las casillas desde la novena en posiciones pares*\/\r\n}\r\n.box:nth-child(2n+10){ \r\n   background-color:#759652; \/*Se cambia el color de fondo de todas las casillas desde la decima en posiciones pares*\/\r\n}\r\n\/*etc, hasta el selector .box:nth-child(2n+58)*\/<\/pre>\n
Utilizando las pseudoclases nth-child<\/code> en CSS, hemos logrado cambiar el color de fondo de las casillas del tablero para obtener un aspecto similar al de un tablero de ajedrez real, con colores alternados de casilla en casilla.<\/p>\n
La utilizaci\u00f3n de estas pseudoclases ofrece una soluci\u00f3n eficiente y concisa para aplicar estilos alternativos a las casillas del tablero, y contribuye a crear una representaci\u00f3n visual m\u00e1s realista del tablero de ajedrez en el dise\u00f1o web.<\/p>\n
Hasta ese momento, tenemos este resultado:<\/p>\n
\"tablero<\/a><\/p>\n
Con los conocimientos adquiridos en este art\u00edculo, puedes continuar explorando y personalizando tu tablero de ajedrez. Puedes experimentar con diferentes estilos y agregar interactividad utilizando JavaScript, como la funcionalidad de arrastrar y soltar las piezas. \u00a1Las posibilidades son infinitas!<\/p>\n
Recuerda siempre practicar y experimentar por tu cuenta para mejorar tus habilidades de dise\u00f1o web.<\/strong> Esperamos que este art\u00edculo haya sido \u00fatil y te haya inspirado a seguir explorando el fascinante mundo del dise\u00f1o web. \u00a1Sigue adelante y crea tableros de ajedrez impresionantes!<\/p>\n","protected":false},"excerpt":{"rendered":"
Hoy vamos a sumergirnos en el fascinante mundo del dise\u00f1o web y en particular, vamos a explorar c\u00f3mo crear un tablero de ajedrez utilizando HTML y el poderoso Grid Layout CSS. En este art\u00edculo, te guiar\u00e9 paso a paso a trav\u00e9s del proceso de creaci\u00f3n…<\/p>\n","protected":false},"author":33,"featured_media":14642,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7],"tags":[],"class_list":["post-14603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"yoast_head":"\nCrea un tablero de ajedrez con HTML y Grid Layout CSS | Espai<\/title>\n<meta name=\"description\" content=\"Crea un tablero de ajedrez con HTML y Grid Layout CSS. \u00a1Domina el dise\u00f1o web con esta gu\u00eda completa paso a paso!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crea un tablero de ajedrez con HTML y Grid Layout CSS | Espai\" \/>\n<meta property=\"og:description\" content=\"Crea un tablero de ajedrez con HTML y Grid Layout CSS. \u00a1Domina el dise\u00f1o web con esta gu\u00eda completa paso a paso!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-16T10:53:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-19T06:19:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Stephanie Guerrero\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Stephanie Guerrero\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/\"},\"author\":{\"name\":\"Stephanie Guerrero\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"headline\":\"Crea un Tablero de Ajedrez con HTML y Grid Layout CSS\",\"datePublished\":\"2023-06-16T10:53:49+00:00\",\"dateModified\":\"2023-06-19T06:19:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/\"},\"wordCount\":900,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg\",\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/\",\"name\":\"Crea un tablero de ajedrez con HTML y Grid Layout CSS | Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg\",\"datePublished\":\"2023-06-16T10:53:49+00:00\",\"dateModified\":\"2023-06-19T06:19:24+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\"},\"description\":\"Crea un tablero de ajedrez con HTML y Grid Layout CSS. \u00a1Domina el dise\u00f1o web con esta gu\u00eda completa paso a paso!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg\",\"width\":1500,\"height\":750},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crea un Tablero de Ajedrez con HTML y Grid Layout CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8\",\"name\":\"Stephanie Guerrero\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g\",\"caption\":\"Stephanie Guerrero\"},\"url\":\"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crea un tablero de ajedrez con HTML y Grid Layout CSS | Espai","description":"Crea un tablero de ajedrez con HTML y Grid Layout CSS. \u00a1Domina el dise\u00f1o web con esta gu\u00eda completa paso a paso!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/","og_locale":"es_ES","og_type":"article","og_title":"Crea un tablero de ajedrez con HTML y Grid Layout CSS | Espai","og_description":"Crea un tablero de ajedrez con HTML y Grid Layout CSS. \u00a1Domina el dise\u00f1o web con esta gu\u00eda completa paso a paso!","og_url":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/","og_site_name":"Blog Escola Espai","article_published_time":"2023-06-16T10:53:49+00:00","article_modified_time":"2023-06-19T06:19:24+00:00","og_image":[{"width":1500,"height":750,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg","type":"image\/jpeg"}],"author":"Stephanie Guerrero","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Stephanie Guerrero","Tiempo de lectura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/"},"author":{"name":"Stephanie Guerrero","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"headline":"Crea un Tablero de Ajedrez con HTML y Grid Layout CSS","datePublished":"2023-06-16T10:53:49+00:00","dateModified":"2023-06-19T06:19:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/"},"wordCount":900,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg","articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/","url":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/","name":"Crea un tablero de ajedrez con HTML y Grid Layout CSS | Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg","datePublished":"2023-06-16T10:53:49+00:00","dateModified":"2023-06-19T06:19:24+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8"},"description":"Crea un tablero de ajedrez con HTML y Grid Layout CSS. \u00a1Domina el dise\u00f1o web con esta gu\u00eda completa paso a paso!","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg","width":1500,"height":750},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2023\/06\/tablero-ajedrez-html-grid-layout-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Crea un Tablero de Ajedrez con HTML y Grid Layout CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/8887c3fae1d9daa1a5c3a8ce82a80ea8","name":"Stephanie Guerrero","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/edb01ba3ec407f03473bab15d97307f0994509854c5cd5010af58ca3ef873327?s=96&d=mm&r=g","caption":"Stephanie Guerrero"},"url":"https:\/\/www.espai.es\/blog\/author\/s-guerrero\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/06\/tablero-ajedrez-madera-1.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=14603"}],"version-history":[{"count":30,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14603\/revisions"}],"predecessor-version":[{"id":14641,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14603\/revisions\/14641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/14642"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=14603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=14603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=14603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}