{"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\/ca\/css\/flexbox-vs-css-grid\/","title":{"rendered":"Flexbox vs CSS Grid"},"content":{"rendered":"<p>En els darrers temps s&#8217;ha discutit molt sobre si, per a maquetar i utilitzar graelles (<i lang=\"en\">grids<\/i>) en un document web \u00e9s millor utilitzar <strong>Flexbox<\/strong> o <strong>CSS Grid<\/strong>, per\u00f2, de fet, s\u00f3n dos sistemes que es complementen.<\/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>Tamb\u00e9 \u00e9s interessant i aclaridor llegir aquest apunt 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> (mar\u00e7 del 2016), per veure quan \u00e9s millor utilitzar Flexbox i quan decidir-se per l&#8217;\u00fas de CSS Grid.<\/p>\n<p>De tota manera, si necessiteu comen\u00e7ar des de zero en aquestes metodologies de maquetaci\u00f3 avan\u00e7ada en CSS, us recomanem alguns enlla\u00e7os i eines per facilitar-vos la tasca.<\/p>\n<h2>Aprendre 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, juliol 2018).<\/p>\n<p><a href=\"https:\/\/chriswrightdesign.com\/experiments\/using-flexbox-today\/\" hreflang=\"en\">Using Flexbox today<\/a>, un article carregat d&#8217;exemples de Chris Wright (gener 2015).<\/p>\n<p><a href=\"http:\/\/yoksel.github.io\/flex-cheatsheet\/\" hreflang=\"en\">Flex Cheat Sheet<\/a>, per aprendre els principis b\u00e0sics de Flexbox.<\/p>\n<p><a href=\"https:\/\/www.flexboxpatterns.com\/\" hreflang=\"en\">Flexbox Patterns<\/a>, per aprendre a construir interf\u00edcies amb Flexbox a partir d&#8217;estructures d&#8217;exemple, amb el codi incl\u00f2s.<\/p>\n<p><a href=\"https:\/\/codepen.io\/enxaneta\/full\/adLPwv\/\" hreflang=\"en\">Flexbox Playground<\/a>, per aprendre les propietats de Flexbox r\u00e0pidament.<\/p>\n<p><a href=\"http:\/\/flexboxfroggy.com\/\" hreflang=\"en\">Flexbox froggy<\/a>, un joc de navegador per aprendre els conceptes b\u00e0sics de Flexbox.<\/p>\n<p><a href=\"https:\/\/flexbox.io\/\" hreflang=\"en\">Flexbox.io<\/a>, un curs de Wes Bos amb una vintena de v\u00eddeos per aprendre Flexbox des de zero. \u00c9s un curs gratu\u00eft, per\u00f2 requereix d&#8217;un email per inscriure-s&#8217;hi.<\/p>\n<h2>Aprendre CSS Grid Layout<\/h2>\n<p><a href=\"https:\/\/www.sitepoint.com\/introduction-css-grid-layout-module\/\">An introduction to the CSS Grid Layout Module<\/a>, Ahmad Ajmi, Sitepoint (juliol 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 guia interactiva de Firefox DevTools.<\/p>\n<p><a href=\"https:\/\/alialaa.github.io\/css-grid-cheat-sheet\/\" hreflang=\"en\">CSS Grid Cheat Sheet<\/a>, guia visual de CSS Grid.<\/p>\n<p><a href=\"http:\/\/griddy.io\" hreflang=\"en\">Griddy<\/a>, per aprendre a utilitzar CSS Grid.<\/p>\n<p><a href=\"http:\/\/cssgridgarden.com\/\" hreflang=\"en\">CSS Grid Garden<\/a>, un joc de navegador per aprendre els conceptes b\u00e0sics de CSS Grid.<\/p>\n<p><a href=\"https:\/\/cssgrid.io\/\" hreflang=\"en\">CSSgrid.io<\/a>, un curs de Wes Bros amb v\u00eddeos per aprendre CSS Grid des de zero. \u00c9s un curs gratu\u00eft, per\u00f2 requereix d&#8217;un email per inscriure-s&#8217;hi.<\/p>\n<p>Finalment, un cop introdu\u00efts en la mat\u00e8ria, tamb\u00e9 us deixem un article 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 moltes altres coses, apunta a la idea que CSS Grid \u00e9s una de les novetats m\u00e9s emocionants en disseny web des de l&#8217;arribada del <i lang=\"en\">Responsive Web Design<\/i>.<\/p>","protected":false},"excerpt":{"rendered":"<p>En els darrers temps s&#8217;ha discutit molt sobre si, per a maquetar i utilitzar graelles (grids) en un document web \u00e9s millor utilitzar Flexbox o CSS Grid, per\u00f2, de fet, s\u00f3n dos sistemes que es complementen. Tamb\u00e9 \u00e9s interessant i aclaridor llegir aquest apunt de Rachel Andrew Should I use Grid or Flexbox? (mar\u00e7 del &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/css\/flexbox-vs-css-grid\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Flexbox vs CSS Grid&#8221;<\/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\/ca\/wp-json\/wp\/v2\/posts\/507","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/users\/163"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/comments?post=507"}],"version-history":[{"count":12,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/507\/revisions"}],"predecessor-version":[{"id":523,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/posts\/507\/revisions\/523"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/media?parent=507"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/categories?post=507"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/ca\/wp-json\/wp\/v2\/tags?post=507"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}