{"id":279,"date":"2018-11-24T12:30:41","date_gmt":"2018-11-24T12:30:41","guid":{"rendered":"http:\/\/keruanima.com\/?p=279"},"modified":"2022-08-08T09:39:57","modified_gmt":"2022-08-08T09:39:57","slug":"grid-vs-flexbox-opinion","status":"publish","type":"post","link":"https:\/\/keruanima.com\/en\/diseno\/diseno-web\/grid-vs-flexbox-opinion\/","title":{"rendered":"Grid vs FlexBox (opini\u00f3n)"},"content":{"rendered":"<p><strong>Grid resulta una opci\u00f3n mucho mas sencilla y visual que flexbox<\/strong>, flexbox nos permite una alineaci\u00f3n de elementos que va en una sola direcci\u00f3n Grid esta preparado para realizar un entramado de celdas con sus propias propiedades como si de una tabla extremadamente vers\u00e1til se tratara.<\/p>\n<figure style=\"width: 427px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large\" src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2016\/03\/grid-template-areas.png\" width=\"427\" height=\"330\" \/><figcaption class=\"wp-caption-text\">Con Grid la creaci\u00f3n de una estructura b\u00e1sica puede hacerse un muchas menos lineas de c\u00f3digo CSS.<\/figcaption><\/figure>\n<p>Grid permite que definamos nuestros espacios en filas y columnas adaptando cada celda con una flexibilidad casi absoluta, el elemento padre prepara el terreno a los hijos y estos pueden beneficiarse aplicando estilos, que seg\u00fan convenga los posicionar\u00e1n ocupando dentro de la tabla ya definida las celdas que se especifiquen, sin necesidad de obligarnos a adaptar el maquetado a unas medidas y posiciones que con flex ser\u00edan mucho mas complejas de adaptar a las medidas de nuestro dise\u00f1o, sobre todo en elementos que cubren alturas y anchos que entran en conflicto con elementos superiores e inferiores, o con medidas de elementos hijos del \u00abdiv\u00bb padre que necesitan medidas mucho mas especificas que flexbox nos complica a la hora de aplicarlas.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1081\" src=\"https:\/\/keruanima.com\/wp-content\/uploads\/2018\/11\/descarga-300x149.png\" alt=\"\" width=\"300\" height=\"149\" \/><\/p>\n<p>Lo mejor ahora ser\u00e1 ejemplificar lo mencionado. Voy a tratar de representar una plantilla base de 5 elementos de dos formas: con flexbox la primera y grid la segunda. Despu\u00e9s comentar\u00e9 el c\u00f3digo y los puntos en los que una opci\u00f3n prima sobre la otra.<\/p>\n<p><strong>CON FLEXBOX<\/strong><\/p>\n<p class=\"codepen\" data-height=\"365\" data-theme-id=\"0\" data-slug-hash=\"LXmdGJ\" data-default-tab=\"css,result\" data-user=\"keruanima\" data-pen-title=\"cssGrid vs Flexbox (Flexbox basic page structure)\">See the Pen <a href=\"https:\/\/codepen.io\/keruanima\/pen\/LXmdGJ\/\">cssGrid vs Flexbox (Flexbox basic page structure)<\/a> by Keruanima (<a href=\"https:\/\/codepen.io\/keruanima\">@keruanima<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p><strong>CON GRID<\/strong><\/p>\n<p class=\"codepen\" data-height=\"365\" data-theme-id=\"0\" data-slug-hash=\"WYJzzR\" data-default-tab=\"css,result\" data-user=\"keruanima\" data-pen-title=\"cssGrid vs Flexbox (Grid basic page structure)\">See the Pen <a href=\"https:\/\/codepen.io\/keruanima\/pen\/WYJzzR\/\">cssGrid vs Flexbox (Grid basic page structure)<\/a> by Keruanima (<a href=\"https:\/\/codepen.io\/keruanima\">@keruanima<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Con <em>flexbox<\/em> a la hora de hacer el <em>responsive<\/em> debemos tener en cuenta mas clases en el <strong><em>media query<\/em> <\/strong>pero <strong>con Grid nos limitamos al padre de los elementos,<\/strong> ya que usando su propiedad <em>grid-area<\/em> no solo colocamos los elemenos en el css de una manera mas visual, si no que lo podemos hacer en una sola clase facil de modificar.<\/p>\n<p style=\"text-align: center;\"><em>Con Grid el dise\u00f1o responsive se puede simplificar mas.<\/em><\/p>\n<p>Entendiendo los conceptos de grid, los estilos con los que cuenta y sus propiedades se pueden realizar webs con una versatilidad, agilidad y econom\u00eda que con flex es mas arduo conseguir. Tambi\u00e9n existen \u00ablimitaciones\u00bb o situaciones que con flexbox se complican, por ejemplo si quisi\u00e9ramos dar a el sidebar derecho un ancho mas peque\u00f1o en el ejemplo hecho con grid ser\u00eda a\u00f1adir una sola linea de c\u00f3digo css pero en el ejemplo que usa flexbox esto se complicar\u00eda algo mas ya que los elementos est\u00e1n adapt\u00e1ndose al espacio total de una manera mucho mas forzosa.<\/p>\n<p>En definitiva Grid es la nueva tendencia y si bien Flexbox sigue siendo muy \u00fatil, estoy seguro de que todo dise\u00f1ador que se precie se adaptara a CSS grid por los beneficios que supone.<\/p>","protected":false},"excerpt":{"rendered":"<p>Grid resulta una opci\u00f3n mucho mas sencilla y visual que flexbox, flexbox nos permite una alineaci\u00f3n de elementos que va en una sola direcci\u00f3n Grid esta preparado para realizar un entramado de celdas con sus propias propiedades como si de una tabla extremadamente vers\u00e1til se tratara. Grid permite que definamos nuestros espacios en filas y [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":297,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[43,13],"tags":[48,14,47],"class_list":["post-279","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno","category-diseno-web","tag-css","tag-diseno-web","tag-opinion"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/comments?post=279"}],"version-history":[{"count":0,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/posts\/279\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/media\/297"}],"wp:attachment":[{"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/media?parent=279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/categories?post=279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/keruanima.com\/en\/wp-json\/wp\/v2\/tags?post=279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}