{"id":9412,"date":"2020-03-16T17:01:59","date_gmt":"2020-03-16T15:01:59","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=9412"},"modified":"2021-09-13T20:39:05","modified_gmt":"2021-09-13T18:39:05","slug":"usar-areas-en-css-grid-layout","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/","title":{"rendered":"Usar \u00e1reas en CSS Grid Layout"},"content":{"rendered":"

En el anterior art\u00edculo vimos los principios b\u00e1sicos de CSS Grid Layout<\/a>. En este art\u00edculo vamos a terminar de profundizar en este nuevo sistema de layout; concretamente vamos a ver como funcionan las \u00e1reas y como alinear los elementos que forman el layoout.<\/p>\n

\u00c1reas de un Grid<\/h2>\n

Existe la posibilidad de indicar la posici\u00f3n de los elementos hijos sin necesidad de indicar los n\u00fameros o nombres de las l\u00edneas de la rejilla. Lo cual, dicho sea, resulta muy conveniente, ya que trabajar con n\u00fameros o nombres de l\u00edneas es poco intuitivo. Para ello tenemos que definir una serie de \u00e1reas con nombres.<\/strong><\/p>\n

Esta vez vamos a partir de un nuevo ejemplo. El c\u00f3digo HTML ser\u00eda el siguiente:<\/p>\n

\r\n<div id="wrapper">\r\n  <header>cabecera<\/header>\r\n  <main>contenido<\/main>\r\n  <aside>barra lateral<\/aside>\r\n  <footer>pie de p\u00e1gina<\/footer>\r\n<\/div>\r\n<\/pre>\n
Y el c\u00f3digo CSS va a ser el siguiente:<\/p>\n
\r\n#wrapper {\r\n  display: grid;\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n  min-height: 100vh; \/* esto es para que como minimo\r\n         ocupe la altura de la ventana del navegador *\/\r\n\r\n  \/* indicamos cuantas filas y columnas, y el nombre de cada \u00e1rea *\/\r\n  grid-template-areas:\r\n    "cabecera cabecera" \/* primera fila *\/\r\n    "contenido barra" \/* segunda fila *\/\r\n    "pie pie"; \/* tercera fila *\/\r\n\r\n  \/* indicamos tama\u00f1os de las filas y columnas *\/\r\n  grid-template-rows: auto 1fr auto;\r\n  grid-template-columns: 70% 30%;\r\n}\r\n\r\n\/* a cada hijo le indicamos su \u00e1rea *\/\r\n#header { grid-area: cabecera; }\r\nmain { grid-area: contenido; }\r\n#footer { grid-area: pie; }\r\n#sidebar { grid-area: barra; }\r\n\r\n\/* un poquito de aspecto *\/\r\n#wrapper>* { padding: 10px; }\r\n#header, #footer { background: black; color: white; }\r\n#sidebar { background: gray; color: white; }\r\n<\/pre>\n
El resultado es el siguiente:<\/p>\n
\"\u00c1reas
\u00c1reas en CSS Grid Layout<\/p><\/div>\n
Con la propiedad CSS grid-template-areas<\/em><\/strong> podemos indicar una serie de cadenas de texto delimitadas por \u201ccomillas\u201d. Cada cadena de texto representa una fila de la rejilla. Y despu\u00e9s, cada palabra de la cadena de texto representa una columna. Por lo que estamos indicando de golpe cuantas filas, cuantas columnas y que nombres va a tener cada \u00e1rea de la rejilla. Obviamente, no podemos hacer un \u201cTetris\u201d y las \u00e1reas han de ser rectangulares. Si queremos que alguna celda de la rejilla no pertenezca a ning\u00fan \u00e1rea debemos de indicar un punto.<\/p>\n
La propiedad grid-template<\/em><\/strong> es una abreviatura que nos permite indicar todos los valores de golpe.<\/p>\n
\r\n#wrapper {\r\n  display: grid;\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n  min-height: 100vh;\r\n  \/* indicamos toda la rejilla de golpe *\/\r\n  grid-template:\r\n    "cabecera cabecera" auto \/* primera fila + tama\u00f1o *\/\r\n    "contenido barra" 1fr \/* segunda fila + tama\u00f1o *\/\r\n    "pie pie" auto \/* tercera fila + tama\u00f1o *\/\r\n    \/ 70% 30%; \/* tama\u00f1os de las columnas *\/\r\n}\r\n<\/pre>\n
En este caso, debemos de indicar una cadena de texto para cada fila seguida de su tama\u00f1o, despu\u00e9s la barra \/ y finalmente los anchos de las columnas.<\/p>\n
Otra abreviatura alternativa a grid-template<\/em><\/strong> es la propiedad CSS grid<\/em><\/strong>, aunque esta \u00faltima permite indicar adem\u00e1s otros valores relacionados con la forma en la que se organizan los elementos hijos de forma autom\u00e1tica.<\/p>\n
Lo bueno de usar \u00e1reas en lugar de n\u00fameros o nombres de l\u00edneas, es que hacer el responsive<\/em> implica simplemente redefinir la rejilla.<\/p>\n
\r\n\/* responsive para pantallas peque\u00f1as *\/\r\n@media only screen and (max-width: 600px) {\r\n  #wrapper {\r\n    grid-template-areas:\r\n      "cabecera" \/* primera fila *\/\r\n      "contenido" \/* segunda fila *\/\r\n      "barra" \/* tercera fila *\/\r\n      "pie"; \/* cuarta fila *\/\r\n      grid-template-rows: auto 1fr auto auto;\r\n      grid-template-columns: 100%;\r\n  }\r\n}\r\n<\/pre>\n
\u00a1Sin necesidad de modificar nada en los elementos hijos!<\/p>\n
Alineamiento<\/h2>\n
Disponemos de una serie de propiedades CSS para alinear las celdas de la rejilla y otra serie de propiedades para alinear los hijos del Grid<\/strong> respecto al \u00e1rea de la rejilla que les ha sido asignada.<\/p>\n
Para alinear las celdas de la rejilla disponemos de dos propiedades CSS:<\/strong><\/span><\/p>\n
    \n
  • justify-content<\/strong> \u2013 permite indicar como se han de distribuir las celdas de la rejilla en horizontal.<\/li>\n
  • align-content<\/strong> \u2013 permite indicar como se han de distribuir las celdas de la rejilla en vertical.<\/li>\n<\/ul>\n
    Es muy importante<\/strong> resaltar que para poder alinear las celdas de la rejilla, es necesario que la rejilla no ocupe todo el ancho y\/o alto del elemento padre<\/strong>. A modo de ejemplo, si la rejilla ocupa todo el ancho del elemento padre, no tiene sentido intentar centrar las celdas ya que ocupan todo el ancho; no se puede centrar horizontalmente algo que ocupa todo el ancho.<\/p>\n
    Ambas propiedades CSS aceptan los siguientes valores:<\/p>\n
      \n
    • start<\/strong> \u2013 las celdas se alinear\u00e1n a la izquierda o a la parte superior.<\/li>\n
    • center<\/strong> \u2013 las celdas se centrar\u00e1n.<\/li>\n
    • end<\/strong> \u2013 las celdas se alinear\u00e1n a la derecha o a la parte inferior.<\/li>\n
    • stretch<\/strong> \u2013 las celdas se estirar\u00e1n en horizontal o vertical hasta repartirse todo el espacio libre; es el valor por defecto<\/strong>. Es importante remarcar que solo tiene efecto si al definir el tama\u00f1o de las filas y columnas usamos auto<\/strong>.<\/li>\n
    • space-between<\/strong> \u2013 distribuye las celdas horizontal o verticalmente repartiendo el espacio libre entre ellas; sin dejar espacio libre antes de la primera celda o despu\u00e9s de la \u00faltima celda.<\/li>\n
    • space-around<\/strong> \u2013 igual al anterior, pero en este caso se a\u00f1ade la mitad de la cantidad de espacio que separa las celdas antes de la primera celda y despu\u00e9s de la \u00faltima.<\/li>\n
    • space-evenly<\/strong> \u2013 igual al anterior pero deja la misma cantidad de separaci\u00f3n al inicio y al final que entre las celdas.<\/li>\n<\/ul>\n
      Veamos un ejemplo:<\/p>\n
      \r\n<div id="wrapper">\r\n  <div id="p1">1<\/div>\r\n  <div id="p2">2<\/div>\r\n  <div id="p3">3<\/div>\r\n  <div id="p4">4<\/div>\r\n<\/div>\r\n<\/pre>\n
      \r\n#wrapper {\r\n  display: grid;\r\n  max-width: 1000px;\r\n  margin: 0 auto;\r\n  min-height: 100vh;\r\n  \/* 2 filas de 100px de anchoy 3 columnas de 100px de ancho *\/\r\n  grid-template:\r\n    "uno uno uno" 100px\r\n    "dos tres cuatro" 100px\r\n    \/ 100px100px100px;\r\n  background: gray;\r\n  border: 4px solid black;\r\n  \/* distribuir elementos en horizontal *\/\r\n  justify-content: space-between;\r\n  \/* centrar rejilla en vertical *\/\r\n  align-content: center;\r\n}\r\n\r\n#p1 { grid-area: uno; background: red; }\r\n#p2 { grid-area: dos; background: green; }\r\n#p3 { grid-area: tres; background: blue; }\r\n#p4 { grid-area: cuatro; background: yellow; }\r\n<\/pre>\n
      Es muy recomendable que pruebes a cambiar los valores de justify-content<\/strong> y align-content<\/strong> de este ejemplo y observes que sucede con cada posible valor.<\/p>\n
      Para alinear los hijos del elemento Grid disponemos de cuatro propiedades CSS:<\/strong><\/span><\/p>\n
        \n
      • justify-items<\/strong> \u2013 Indica c\u00f3mo se alinean en horizontal<\/strong> los elementos hijos. Se aplica al elemento padre y afecta a todos los hijos.<\/li>\n
      • justify-self<\/strong> \u2013 Indica c\u00f3mo se alinean en horizontal<\/strong> los elementos hijos. Se aplica directamente a los elementos hijos.<\/li>\n
      • align-items<\/strong> \u2013 Indica c\u00f3mo se alinean en vertical<\/strong> los elementos hijos. Se aplica al elemento padre y afecta a todos los hijos.<\/li>\n
      • align-self<\/strong> \u2013 Indica c\u00f3mo se alinean en vertical<\/strong> los elementos hijos. Se aplica directamente a los elementos hijos.<\/li>\n<\/ul>\n
        Los posibles valores para estas propiedades son:<\/p>\n
          \n
        • start<\/strong> \u2013 los elementos hijos se alinear\u00e1 a la izquierda o a la parte superior de la zona de la rejilla que les ha sido asignada.<\/li>\n
        • end<\/strong> \u2013 los elementos hijos se alinear\u00e1 a la derecha o a la parte inferior de la zona de la rejilla que les ha sido asignada<\/li>\n
        • center<\/strong> \u2013 los elementos hijos se centrar\u00e1n horizontal o verticalmente respecto a la zona de la rejilla que les ha sido asignada<\/li>\n
        • stretch<\/strong> \u2013 los elementos hijos ocupar\u00e1n todo el ancho o alto de la zona de la rejilla que les ha sido asignada. Es el valor por defecto.<\/strong><\/li>\n<\/ul>\n
          Prueba a a\u00f1adir al ejemplo anterior el siguiente c\u00f3digo CSS:<\/p>\n
          \r\n#wrapper{\r\n  \/* cada hijo del grid saldr\u00e1 centrado en horizontal\r\n     y en la parte inferior del \u00e1rea de la rejilla asignada *\/\r\n  justify-items: center;\r\n  align-items: end;\r\n}\r\n\r\n#p1{\r\n  \/* excepto en el caso del #p1 que saldr\u00e1 ocupando todo el ancho\r\n     y en la parte superior del \u00e1rea de la rejilla asignada *\/\r\n  justify-self: stretch;\r\n  align-self: start;\r\n}\r\n<\/pre>\n
          De nuevo es muy recomendable que pruebes a cambiar el valor de estas propiedades y observes el resultado de dichos cambios.<\/p>\n
          Y nada m\u00e1s. Hasta aqu\u00ed esta serie de art\u00edculos sobre CSS Grid Layout. Espero que os haya resultado interesante este nuevo y versatil sistema de layout.<\/p>\n","protected":false},"excerpt":{"rendered":"
          En el anterior art\u00edculo vimos los principios b\u00e1sicos de CSS Grid Layout. En este art\u00edculo vamos a terminar de profundizar en este nuevo sistema de layout; concretamente vamos a ver como funcionan las \u00e1reas y como alinear los elementos que forman el layoout. \u00c1reas de…<\/p>\n","protected":false},"author":23,"featured_media":9475,"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":[12,714],"class_list":["post-9412","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","tag-css","tag-grid"],"yoast_head":"\nUsar \u00e1reas en CSS Grid Layout - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"En este art\u00edculo vamos a profundizar sobre el uso de \u00e1reas en CSS Grid Layout. Tambi\u00e9n veremos como funciona el alineamiento de los elementos.\" \/>\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\/2020\/03\/usar-areas-en-css-grid-layout\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Usar \u00e1reas en CSS Grid Layout - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a profundizar sobre el uso de \u00e1reas en CSS Grid Layout. Tambi\u00e9n veremos como funciona el alineamiento de los elementos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-16T15:01:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-13T18:39:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Usar \u00e1reas en CSS Grid Layout\",\"datePublished\":\"2020-03-16T15:01:59+00:00\",\"dateModified\":\"2021-09-13T18:39:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/\"},\"wordCount\":963,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg\",\"keywords\":[\"CSS\",\"Grid\"],\"articleSection\":[\"Dise\u00f1o Web\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/\",\"name\":\"Usar \u00e1reas en CSS Grid Layout - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg\",\"datePublished\":\"2020-03-16T15:01:59+00:00\",\"dateModified\":\"2021-09-13T18:39:05+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"En este art\u00edculo vamos a profundizar sobre el uso de \u00e1reas en CSS Grid Layout. Tambi\u00e9n veremos como funciona el alineamiento de los elementos.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg\",\"width\":1000,\"height\":500,\"caption\":\"Usar \u00e1reas en CSS Grid Layout\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Usar \u00e1reas en CSS Grid Layout\"}]},{\"@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\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Usar \u00e1reas en CSS Grid Layout - Blog Escola Espai","description":"En este art\u00edculo vamos a profundizar sobre el uso de \u00e1reas en CSS Grid Layout. Tambi\u00e9n veremos como funciona el alineamiento de los elementos.","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\/2020\/03\/usar-areas-en-css-grid-layout\/","og_locale":"es_ES","og_type":"article","og_title":"Usar \u00e1reas en CSS Grid Layout - Blog Escola Espai","og_description":"En este art\u00edculo vamos a profundizar sobre el uso de \u00e1reas en CSS Grid Layout. Tambi\u00e9n veremos como funciona el alineamiento de los elementos.","og_url":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/","og_site_name":"Blog Escola Espai","article_published_time":"2020-03-16T15:01:59+00:00","article_modified_time":"2021-09-13T18:39:05+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Usar \u00e1reas en CSS Grid Layout","datePublished":"2020-03-16T15:01:59+00:00","dateModified":"2021-09-13T18:39:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/"},"wordCount":963,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg","keywords":["CSS","Grid"],"articleSection":["Dise\u00f1o Web"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/","url":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/","name":"Usar \u00e1reas en CSS Grid Layout - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg","datePublished":"2020-03-16T15:01:59+00:00","dateModified":"2021-09-13T18:39:05+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"En este art\u00edculo vamos a profundizar sobre el uso de \u00e1reas en CSS Grid Layout. Tambi\u00e9n veremos como funciona el alineamiento de los elementos.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg","width":1000,"height":500,"caption":"Usar \u00e1reas en CSS Grid Layout"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2020\/03\/usar-areas-en-css-grid-layout\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Usar \u00e1reas en CSS Grid Layout"}]},{"@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\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2020\/03\/grid2.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9412","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\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=9412"}],"version-history":[{"count":12,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9412\/revisions"}],"predecessor-version":[{"id":12276,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/9412\/revisions\/12276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/9475"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=9412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=9412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=9412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}