{"id":1516,"date":"2024-08-02T07:02:26","date_gmt":"2024-08-02T05:02:26","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=1516"},"modified":"2024-08-02T07:02:27","modified_gmt":"2024-08-02T05:02:27","slug":"01-introducccion-al-grid-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/css3\/grid-css\/01-introducccion-al-grid-css\/","title":{"rendered":"01. Introduccci\u00f3n al Grid CSS"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Sin duda, uno de los procesos mas frustrantes al trabajar con <strong>CSS<\/strong>, m\u00e1s si hablamos de gente que est\u00e1 comenzando, es el proceso de distribuir elementos a lo largo de una <strong>p\u00e1gina web<\/strong>. Algunos de los antiguos mecanismos, como son <strong>posicionamiento<\/strong>, <strong>floats<\/strong>, <strong>elementos en bloque<\/strong> o <strong>en l\u00ednea<\/strong>, no son suficientes para crear un esquema o estructura para una p\u00e1gina web.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"wp-block-paragraph\">La llegada de <strong>Flexbox<\/strong> ayud\u00f3 much\u00edsimo a mejorar las capacidades de distribuci\u00f3n, pero el problema de <strong>Flexbox&nbsp;<\/strong> es que \u00e9ste est\u00e1 mas orientado a <strong>estructuras de una sola dimensi\u00f3n<\/strong>, por lo tanto seguimos necesitando una herramienta m\u00e1s potente si necesitamos estructurar webs m\u00e1s complejas. Con el paso del tiempo, muchos <strong>frameworks<\/strong> o <strong>librer\u00edas<\/strong> est\u00e1n utilizando sistemas <strong>Grid<\/strong>, en los cuales definen una cuadr\u00edcula determinada, y mediante la modificaci\u00f3n de los nombres de <strong>clases<\/strong> de los elementos <strong>HTML<\/strong>, podemos ajustar su <strong>tama\u00f1o<\/strong>, <strong>posici\u00f3n<\/strong> y <strong>colocaci\u00f3n<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Grid CSS<\/strong> naci\u00f3 para dar soluci\u00f3n a esa necesidad, recogiendo las ventajas de <strong>Flexbox<\/strong>, pero a\u00f1adiendo numerosas mejoras y caracter\u00edsticas que le permiten crear cuadr\u00edculas sencillas y potentes de manera muy r\u00e1pida y eficaz.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sin duda, uno de los procesos mas frustrantes al trabajar con CSS, m\u00e1s si hablamos de gente que est\u00e1 comenzando, es el&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1511,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-1516","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Sin duda, uno de los procesos mas frustrantes al trabajar con CSS, m\u00e1s si hablamos de gente que est\u00e1 comenzando, es el...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1516","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=1516"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1516\/revisions"}],"predecessor-version":[{"id":1518,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1516\/revisions\/1518"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/1511"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=1516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}