{"id":227,"date":"2023-01-08T14:04:39","date_gmt":"2023-01-08T14:04:39","guid":{"rendered":"http:\/\/javigomez.org\/?p=227"},"modified":"2025-09-29T20:34:20","modified_gmt":"2025-09-29T20:34:20","slug":"composicion-con-areas-en-grid-y-alineacion-de-textos","status":"publish","type":"post","link":"https:\/\/javigomez.org\/index.php\/2023\/01\/08\/composicion-con-areas-en-grid-y-alineacion-de-textos\/","title":{"rendered":"Composici\u00f3n con \u00e1reas en Grid y alineaci\u00f3n de textos"},"content":{"rendered":"\n<p>Este es un peque\u00f1o c\u00f3digo en donde se utiliza un grid con \u00e1reas, teniendo filas multicolumnas y se utiliza flex para centrar verticalmente y alinear los textos.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"341\" height=\"114\" src=\"http:\/\/javigomez.org\/wp-content\/uploads\/2023\/01\/image-10.png\" alt=\"\" class=\"wp-image-228\" srcset=\"https:\/\/javigomez.org\/wp-content\/uploads\/2023\/01\/image-10.png 341w, https:\/\/javigomez.org\/wp-content\/uploads\/2023\/01\/image-10-300x100.png 300w\" sizes=\"auto, (max-width: 341px) 100vw, 341px\" \/><\/figure><\/div>\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\"&gt;\n  &lt;div class=\"item item-1\"&gt;Item 1&lt;\/div&gt;\n  &lt;div class=\"item item-2\"&gt;Item 2:&lt;\/div&gt;\n  &lt;div class=\"item item-3\"&gt;Item 3&lt;\/div&gt;\n  &lt;div class=\"item item-4\"&gt;Item 4&lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.item {border: 1px solid black;height:30px;}\n.container {\n  display: grid;\n  <strong>grid-template-areas: \"head head\"\n                       \"menu main\"\n                       \"foot foot\";<\/strong>\n  grid-template-columns: 100px 200px;\n  align-items: center;\n  gap: 0px 5px;\n}\n\n.item-1 { grid-area: head; \n          background: blue; }\n.item-2 { grid-area: menu; \n          background: red; \n          <strong>display: flex;\n          justify-content: right;\n          align-items: center;<\/strong>\n}\n.item-3 { grid-area: main; \n          background: green; \n          <strong>display: flex;\n          justify-content: left;\n          align-items: center;<\/strong>\n}\n.item-4 { grid-area: foot; \n          background: orange; }\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Este es un peque\u00f1o c\u00f3digo en donde se utiliza un grid con \u00e1reas, teniendo filas multicolumnas y se utiliza flex para centrar verticalmente y alinear &hellip; <\/p>\n","protected":false},"author":1,"featured_media":228,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[27,39,106,177],"class_list":["post-227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-alineacion","tag-areas","tag-css","tag-grid"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":1,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":959,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/227\/revisions\/959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/228"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}