{"id":12046,"date":"2019-02-27T15:15:57","date_gmt":"2019-02-27T14:15:57","guid":{"rendered":"https:\/\/www.veiss.com\/blog\/?p=12046"},"modified":"2019-09-05T14:27:14","modified_gmt":"2019-09-05T12:27:14","slug":"css-grid","status":"publish","type":"post","link":"https:\/\/www.veiss.com\/blog\/css-grid\/","title":{"rendered":"CSS Grid. \u00bfEs Bootstrap un cad\u00e1ver andante?"},"content":{"rendered":"<p><a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/\">La especificaci\u00f3n CSS Grid fue introducida en 2017<\/a> y ya ha sido adoptada por casi todos los navegadores importantes. Con esta&nbsp;<strong>nueva especificaci\u00f3n en CSS<\/strong>&nbsp;es posible crear layouts complejos, al estilo de las columnas de Bootstrap. Por ejemplo, horizontal y verticalmente, <strong>sin CSS adicional<\/strong>.<\/p>\n<p>Para ver d\u00f3nde funciona y d\u00f3nde no, puedes consultar&nbsp;<a href=\"https:\/\/caniuse.com\/#search=css%20grid\">CSS Grid en CanIUse.<\/a> En general, funciona en todos los navegadores en sus dos \u00faltimas versiones, incluido Explorer.<\/p>\n<p>Seg\u00fan mi modesta opini\u00f3n, CSS Grid <strong>va a terminar con<\/strong>&nbsp;<strong>frameworks como Bootstrap o Foundation. O puede que estos frameworks lo adopten m\u00e1s pronto que tarde, ya que permite:<\/strong><\/p>\n<ul>\n<li>C\u00f3digo HTML m\u00e1s sem\u00e1ntico.<\/li>\n<li>Nuevos posibilidades en el dise\u00f1o.<\/li>\n<li>M\u00e1s complejidad con menos c\u00f3digo.<\/li>\n<li>Menos dependencias de librer\u00edas de terceros.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n he preparado unos CodePens con ejemplos, desde lo m\u00e1s b\u00e1sico hasta lo m\u00e1s complejo, mezcl\u00e1ndolo con Flexbox (que fue introducido antes, pero que est\u00e1 claramente pensado para usarse con esta nueva especificaci\u00f3n).<\/p>\n<p>Adem\u00e1s, hay que tener en cuenta que se pueden anidar diferentes grids y flexboxes.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_45 counter-hierarchy ez-toc-counter ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\">&iquest;Qu&eacute; vas a leer en este contenido?<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" area-label=\"ez-toc-toggle-icon-1\"><label for=\"item-6a682e239a3dc\" aria-label=\"Tabla de contenidos\"><span style=\"display: flex;align-items: center;width: 35px;height: 30px;justify-content: center;direction:ltr;\"><svg style=\"fill: #2a2a2a;color:#2a2a2a\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #2a2a2a;color:#2a2a2a\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/label><input  type=\"checkbox\" id=\"item-6a682e239a3dc\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.veiss.com\/blog\/css-grid\/#1_-_Set_Up_basico\" title=\"1 &#8211; Set Up b\u00e1sico:\">1 &#8211; Set Up b\u00e1sico:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.veiss.com\/blog\/css-grid\/#2_-_Colocando_elementos_en_la_Grid\" title=\"2 &#8211; Colocando elementos en la Grid\">2 &#8211; Colocando elementos en la Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.veiss.com\/blog\/css-grid\/#3_-_Alineacion_de_elementos_en_la_Grid\" title=\"3 &#8211; Alineaci\u00f3n de elementos en la Grid:\">3 &#8211; Alineaci\u00f3n de elementos en la Grid:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.veiss.com\/blog\/css-grid\/#4_-_CSS_Grid_AutoFlow\" title=\"4 &#8211; CSS Grid AutoFlow:\">4 &#8211; CSS Grid AutoFlow:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.veiss.com\/blog\/css-grid\/#5_-_CSS_Grid_Areas\" title=\"5 &#8211; CSS Grid \u00c1reas:\">5 &#8211; CSS Grid \u00c1reas:<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_-_Set_Up_basico\"><\/span>1 &#8211; Set Up b\u00e1sico:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aqu\u00ed puedes ver una configuraci\u00f3n b\u00e1sica.<\/p>\n<p>Tambi\u00e9n se ha introducido una <strong>nueva unidad \u00abfr\u00bb,<\/strong> es decir, fracciones del espacio disponible.<\/p>\n<p>Adem\u00e1s, hay que tener en cuenta que <strong>repeat<\/strong> es un <strong>shortdode<\/strong>, es decir:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-template-columns: repeat(4,1fr);<\/pre>\n<p>es lo mismo que:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-template-columns: 1fr 1fr 1fr 1fr;<\/pre>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='KJgbJE' data-default-tab='css,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen <a href=\u2019https:\/\/codepen.io\/IbanVeiss\/pen\/KJgbJE\/\u2019>CSS Grid \u2013 Set up b\u00e1sico<\/a> by Iban (<a href=\u2019https:\/\/codepen.io\/IbanVeiss\u2019>@IbanVeiss<\/a>) on <a href=\u2019https:\/\/codepen.io\u2019>CodePen<\/a>.0<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<h2><span class=\"ez-toc-section\" id=\"2_-_Colocando_elementos_en_la_Grid\"><\/span>2 &#8211; Colocando elementos en la Grid<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aqu\u00ed puedes ver como crear y posicionar elementos vertical y horizontalmente, y cambiar su posici\u00f3n visualmente, solo con CSS.<\/p>\n<p>Simplemente, si tienes una grid creada de 5 columnas, en el contenedor:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">display: grid;\ngrid-template-columns: repeat(5,1fr);<\/pre>\n<p>Si quieres que un elemento empiece en la tercera columna y ocupe dos:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-column: 3 \/ span 2;<\/pre>\n<p>Lo mismo pero en filas:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-row: 1 \/span 2;<\/pre>\n<p>Por ejemplo, si quieres que la div 2 aparezca visualmente en la fila 4 en la columna 5:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-row: 4;\ngrid-column: 5 \/ 6;<\/pre>\n<p>Para que un elemento ocupe todo el espacio disponible:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-column: 1 \/ -1;<\/pre>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='LqRqOe' data-default-tab='html,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen <a href=\u2019https:\/\/codepen.io\/IbanVeiss\/pen\/LqRqOe\/\u2019>CSS Grid \u2013 Colocando elementos en la grid<\/a> by Iban (<a href=\u2019https:\/\/codepen.io\/IbanVeiss\u2019>@IbanVeiss<\/a>) on <a href=\u2019https:\/\/codepen.io\u2019>CodePen<\/a>.0<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<h2><span class=\"ez-toc-section\" id=\"3_-_Alineacion_de_elementos_en_la_Grid\"><\/span>3 &#8211; Alineaci\u00f3n de elementos en la Grid:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Para alinear los elementos globalmente, en el contenedor:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">justify-items: center; \/\/Horizontal\nalign-items: center; \/\/Vertical<\/pre>\n<p>Luego puedes alinear cada elemento. Por ejemplo, uno que ocupe todo el espacio disponible:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">justify-self: stretch; \/\/Horizontal 100%\nalign-self: stretch; \/\/Vertical 100%<\/pre>\n<p>Adem\u00e1s, dentro de cada elemento puedes utilizar <strong>flex. <\/strong>Por ejemplo:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/\/Contenido de la celda v\u00eda Flex\ndisplay: flex;\njustify-content: center;\nalign-items: center;<\/pre>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='aXByZr' data-default-tab='css,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen <a href=\u2019https:\/\/codepen.io\/IbanVeiss\/pen\/aXByZr\/\u2019>CSS Grid \u2013 Alineaci\u00f3n de elementos en la grid<\/a> by Iban (<a href=\u2019https:\/\/codepen.io\/IbanVeiss\u2019>@IbanVeiss<\/a>) on <a href=\u2019https:\/\/codepen.io\u2019>CodePen<\/a>.0<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<h2><span class=\"ez-toc-section\" id=\"4_-_CSS_Grid_AutoFlow\"><\/span>4 &#8211; CSS Grid AutoFlow:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si quieres, la grid&nbsp;<strong>intentar\u00e1 jugar al Tetris<\/strong> encajando (siempre que sea posible, claro) las piezas que tenga en el espacio dado. Le puedes decir que lo haga en todo o solo en columnas o filas:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\"> grid-auto-flow: dense;\/\/ row, column, dense<\/pre>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='PVbJaX' data-default-tab='html,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen <a href=\u2019https:\/\/codepen.io\/IbanVeiss\/pen\/PVbJaX\/\u2019>CSS Grid \u2013 Autoflow<\/a> by Iban (<a href=\u2019https:\/\/codepen.io\/IbanVeiss\u2019>@IbanVeiss<\/a>) on <a href=\u2019https:\/\/codepen.io\u2019>CodePen<\/a>.0<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<h2><span class=\"ez-toc-section\" id=\"5_-_CSS_Grid_Areas\"><\/span>5 &#8211; CSS Grid \u00c1reas:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Esto es lo m\u00e1s \u00abcomplejo\u00bb<\/strong>, defines una grid y sus \u00e1reas. Si tiene 6 columnas hemos de especificar 6 veces el \u00e1rea:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">display: grid;\n    grid-template-columns: repeat(6,1fr);\n    grid-template-rows: auto;\n    grid-template-areas:\n      \"header header header header header header\"\n      \"main main main main main main\"\n      \"sidebar1 sidebar1 sidebar1 sidebar1 sidebar1 sidebar1\"\n      \"sidebar2 sidebar2 sidebar2 sidebar2 sidebar2 sidebar2\"\n      \"widgets widgets widgets widgets widgets widgets\"\n      \"footer footer footer footer footer footer\";<\/pre>\n<p>Luego le dices a los elementos que \u00e1rea han de ocupar. Por ejemplo, la cabecera:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-area: header;\nbackground-color: blue;\nheight: 6vh;<\/pre>\n<p>El art\u00edculo:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-area: main;\nbackground-color: grey;\npadding: 1rem;<\/pre>\n<p>Tambi\u00e9n puedes ir cambiado el layout con media-queries:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@media (min-width: 992px) {\n      grid-template-columns: 150px 150px 1fr 1fr 150px 150px;\n      grid-template-areas:\n        \"header header header header header header\"\n        \"sidebar1 sidebar1 main main sidebar2 sidebar2\"\n        \"widgets widgets widgets widgets widgets widgets\"\n        \"footer footer footer footer footer footer\";\n  }<\/pre>\n<p class='codepen'  data-height='265' data-theme-id='0' data-slug-hash='xMRmBG' data-default-tab='html,result' data-animations='run' data-editable='' data-embed-version='2'>\nSee the Pen <a href=\u2019https:\/\/codepen.io\/IbanVeiss\/pen\/xMRmBG\/\u2019>CSS Grid \u2013 Areas<\/a> by Iban (<a href=\u2019https:\/\/codepen.io\/IbanVeiss\u2019>@IbanVeiss<\/a>) on <a href=\u2019https:\/\/codepen.io\u2019>CodePen<\/a>.0<\/p>\n<script async src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<p>&nbsp;<\/p>\n<p><strong>En definitiva, este es el presente\/futuro de los layouts con CSSs. <\/strong><\/p>\n<p><strong>Cuanto antes empecemos a utilizarlo mejor.<\/strong><\/p>\n<p>Bibliograf\u00eda:<\/p>\n<p><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/<\/a><\/p>\n<p><a href=\"http:\/\/www.mastercssgrid.com\/\">http:\/\/www.mastercssgrid.com\/<\/a><\/p>\n<p><a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/\">https:\/\/www.w3.org\/TR\/css-grid-1\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La especificaci\u00f3n CSS Grid fue introducida en 2017 y ya ha sido adoptada por casi todos los navegadores importantes. Con esta&nbsp;nueva especificaci\u00f3n en CSS&nbsp;es posible crear layouts complejos, al estilo de las columnas de Bootstrap. Por ejemplo, horizontal y verticalmente, sin CSS adicional. Para ver d\u00f3nde funciona y d\u00f3nde no, puedes consultar&nbsp;CSS Grid en CanIUse. [&hellip;]<\/p>\n","protected":false},"author":19,"featured_media":12089,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1232],"tags":[1234,1237,1233,1236,1235],"_links":{"self":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12046"}],"collection":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/comments?post=12046"}],"version-history":[{"count":21,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12046\/revisions"}],"predecessor-version":[{"id":12412,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/posts\/12046\/revisions\/12412"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/media\/12089"}],"wp:attachment":[{"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/media?parent=12046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/categories?post=12046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.veiss.com\/blog\/wp-json\/wp\/v2\/tags?post=12046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}