Podrás usar un grid nativo con CSS

Últimamente CSS ha estado activo con sus drafts por parte de la W3C, ya hemos publicado algunas nuevas propuestas que pueden ser probadas con las versiones más recientes de los navegadores y han sido muy interesantes para los desarrolladores por que están aumentando considerablemente las posibilidades de desarrollar más rápido ó con mejores capacidades en la web.

¿Qué es el Grid CSS?

Si recuerdan, frameworks como Foundation, Bootstrap o Skeleton utilizan el ya famoso Grid; todo está distribuido en filas y columnas, algo que ha permitido hacer el maquetado más simple y ofreciendo nuevas posibilidades de diseño, por ejemplo, responsive design.

Las opciones que tenemos para un grid son basadas en:

• Tablas
• float
• inline-block

Pero ahora es totalmente nativo, los antiguos problemas quedan casi olvidados, no más alturas ó anchuras, floats o inline-block, espacios entre columnas o filas y más ajustable por el simple hecho de ser nativo.

Problemas con esta nueva propuesta

Como todo, lo primero que sucede es que draft está en una etapa bastante temprana, es muy probable que pocos navegadores le den soporte. Se dice que existen 5 autores a cargo de los cuales 3 son de Microsoft, por lo que en Internet Explorer 10 puedes probarlo.

Otra cosa muy importante, es que puede estar sujeto a cambios de ultima hora, entonces puede ser que lo utilices pero después no funcione más esa versión de la especificación.

Veamos un ejemplo de la W3C

Primero el CSS:

 #grid {
    display: grid;

    /* 
       Dos columnas: La primera el tamaño del contenido, la segunda recibe
       el espacio restante, pero nunca se reduce al minimo de Board o los 
       controles de Game.
    */
    grid-template-columns: auto minmax(min-content, 1fr);

    /* 
       Tres filas: la primera y la última de tamaño a los contenidos, la fila 
       central recibe el resto del espacio, pero nunca es menor que la altura 
       mínima de Board o el area de Stats. 
    */
    grid-template-rows: auto minmax(min-content, 1fr) auto
  }

  /*
    Cada parte de Game se coloca entre las líneas de cuadrícula haciendo 
    referencia a la línea del Grid y luego especificando, si hay 
    más de uno, el número de filas o columnas que ocupa para determinar la línea 
    del Grid final, que establece los límites.
  */
  #title    { grid-column: 1; grid-row: 1 }
  #score    { grid-column: 1; grid-row: 3 }
  #stats    { grid-column: 1; grid-row: 2; justify-self: start }
  #board    { grid-column: 2; grid-row: 1 / span 2; }
  #controls { grid-column: 2; grid-row: 3; align-self: center }

Después el HTML:

<div id="grid">
<div id="title">Game Title</div>
<div id="score">Score</div>
<div id="stats">Stats</div>
<div id="board">Board</div>
<div id="controls">Controls</div>
</div>

Podemos ver que para realizar un simple grid solo ocupamos pocas lineas de código, es una grandiosa idea que esperemos tome más fuerza para ver nuevos potentes frameworks con un grid sorprendente que los desarrolladores front-end podamos utilizar.

NOTA IMPORTANTE: Este no es un tutorial, solo deseo informarles lo que está sucediendo con HTML5 últimamente.

Coméntamos que te parece esta propuesta.