{"id":507,"date":"2019-01-09T13:29:20","date_gmt":"2019-01-09T12:29:20","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=507"},"modified":"2019-01-09T13:34:35","modified_gmt":"2019-01-09T12:34:35","slug":"flexbox-vs-css-grid","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/flexbox-vs-css-grid\/","title":{"rendered":"Flexbox vs CSS Grid"},"content":{"rendered":"<p>\u00daltimamente se ha discutido mucho sobre si, para maquetar y utilizar parrillas (<i lang=\"en\">grids<\/i>) en un documento web es mejor utilizar <strong>Flexbox<\/strong> o <strong>CSS Grid<\/strong>, pero, en realidad, son dos sistemas que se complementan.<\/p>\n<p><iframe loading=\"lazy\" title=\"Flexbox vs. CSS Grid \u2014 Which is Better?\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/hs3piaN4b5I?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Tambi\u00e9n es interesante y clarificador leer este apunte de Rachel Andrew <a href=\"https:\/\/rachelandrew.co.uk\/archives\/2016\/03\/30\/should-i-use-grid-or-flexbox\/\" hreflang=\"en\">Should I use Grid or Flexbox?<\/a> (marzo 2016), para ver cuando es mejor utilizar Flexbox y cuando optar por el uso de CSS Grid.<\/p>\n<p>De todos modos, si necesit\u00e1is empezar desde cero en estas metodolog\u00edas de maquetaci\u00f3n avanzada en CSS, os recomendamos algunos enlaces y herramientas para facilitaros el trabajo.<\/p>\n<h2>Aprender Flexbox<\/h2>\n<p><a href=\"https:\/\/www.sitepoint.com\/flexbox-css-flexible-box-layout\/\" hreflang=\"en\">A friendly introduction to Flexbox for begginers<\/a> (Sitepoint, julio 2018)<\/p>\n<p><a href=\"https:\/\/chriswrightdesign.com\/experiments\/using-flexbox-today\/\" hreflang=\"en\">Using Flexbox today<\/a>, un art\u00edculo cargado de ejemplos de Chris Wright (gener 2015)<\/p>\n<p><a href=\"http:\/\/yoksel.github.io\/flex-cheatsheet\/\" hreflang=\"en\">Flex Cheat Sheet<\/a>, para aprender los principios b\u00e1sicos de Flexbox.<\/p>\n<p><a href=\"https:\/\/www.flexboxpatterns.com\/\" hreflang=\"en\">Flexbox Patterns<\/a>, para aprender a construir interfaces con Flexbox a partir de estructuras de ejemplo, con el c\u00f3digo inclu\u00eddo.<\/p>\n<p><a href=\"https:\/\/codepen.io\/enxaneta\/full\/adLPwv\/\" hreflang=\"en\">Flexbox Playground<\/a>, para aprender las propiedades de Flexbox r\u00e1pidamente.<\/p>\n<p><a href=\"http:\/\/flexboxfroggy.com\/\" hreflang=\"en\">Flexbox froggy<\/a>, un juego de navegador para aprender los conceptos b\u00e1sicos de Flexbox.<\/p>\n<p><a href=\"https:\/\/flexbox.io\/\" hreflang=\"en\">Flexbox.io<\/a> un curso de Wes Bos con una veintena de videos para aprender Flexbox desde cero. Es un curso gratuito pero requiere registro v\u00eda e-mail.<\/p>\n<h2>Aprender CSS Grid Layout<\/h2>\n<p><a href=\"https:\/\/www.sitepoint.com\/introduction-css-grid-layout-module\/\" hreflang=\"en\">An introduction to the CSS Grid Layout Module<\/a>, Ahmad Ajmi, Sitepoint (julio 2018).<\/p>\n<p><a href=\"https:\/\/gridbyexample.com\" hreflang=\"en\">Grid by example<\/a>, <i lang=\"en\">everything you need to learn CSS Grid Layout<\/i>, Rachel Andrew.<\/p>\n<p><a href=\"https:\/\/mozilladevelopers.github.io\/playground\/css-grid\" hreflang=\"en\">Introduction to CSS Grid Layout<\/a>, una gu\u00eda interactiva de Firefox DevTools.<\/p>\n<p><a href=\"https:\/\/alialaa.github.io\/css-grid-cheat-sheet\/\" hreflang=\"en\">CSS Grid Cheat Sheet<\/a>, gu\u00eda visual de CSS Grid.<\/p>\n<p><a href=\"http:\/\/griddy.io\" hreflang=\"en\">Griddy<\/a>, para aprender a utilizar CSS Grid.<\/p>\n<p><a href=\"http:\/\/cssgridgarden.com\/\" hreflang=\"en\">CSS Garden<\/a>, un juego de navegador para aprender los conceptos b\u00e1sicos de CSS Grid.<\/p>\n<p><a href=\"https:\/\/cssgrid.io\/\" hreflang=\"en\">CSSgrid.io<\/a>, un curso de Wes Bros con videos para aprender CSS Grid desde cero. Es un curso gratuito, pero es necesario inscribirse v\u00eda e-mail.<\/p>\n<p>Finalmente, un vez introducidos en la materia, tambi\u00e9n os dejamos un art\u00edculo de Manuel Matuzovi\u0107, <a href=\"https:\/\/www.smashingmagazine.com\/2017\/07\/enhancing-css-layout-floats-flexbox-grid\/\" hreflang=\"en\">Progressively Enhancing CSS Layout: From floats to Flexbox to Grid<\/a>, que, entre muchas otras cosas, apunta a la idea que CSS Grid es una de les novedades m\u00e1s emocionantes en dise\u00f1o web desde la llegada del <i lang=\"en\">Responsive Web Design<\/i>.<\/p>","protected":false},"excerpt":{"rendered":"<p>\u00daltimamente se ha discutido mucho sobre si, para maquetar y utilizar parrillas (grids) en un documento web es mejor utilizar Flexbox o CSS Grid, pero, en realidad, son dos sistemas que se complementan. Tambi\u00e9n es interesante y clarificador leer este apunte de Rachel Andrew Should I use Grid or Flexbox? (marzo 2016), para ver cuando &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/flexbox-vs-css-grid\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00abFlexbox vs CSS Grid\u00bb<\/span><\/a><\/p>\n","protected":false},"author":163,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-507","post","type-post","status-publish","format-standard","hentry","category-css","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":12,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/507\/revisions"}],"predecessor-version":[{"id":523,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/507\/revisions\/523"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=507"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}