El diseño de cuadrícula en CSS3

1. Los navegadores

A pesar de su estado de Candidate Recommendation, de momento este módulo está poco reconocido por los principales navegadores. Esto es lo que se dice de él en Can I Use:

¡Solo los navegadores de Microsoft reconocen este módulo! Pero el hecho de haber pasado al estado de Candidate Recommendation debería acelerar su implementación en el resto de los navegadores, sin duda. Por ello, es importante adquirir esta técnica desde ya.

2. Forzar el reconocimiento

Aun así, podrá utilizar sus navegadores favoritos. Vamos a «forzar» el reconocimiento de este módulo. ¡Atención! Debe tener claro que no vamos a utilizar los navegadores estándar, vamos a usar los navegadores en una configuración especial que le permitirá probar y utilizar el módulo Grid Layout para usted y únicamente para usted. Los visitantes de sus sitios no tendrán estas versiones.

3. Google Chrome

La línea Funciones experimentales de Web Platform aparece resaltada.

La función experimental se cambia a Inhabilitar...

1. Los anchos fijos de las columnas

En este primer ejemplo, vamos a crear una cuadrícula normal de 2 filas y 3 columnas.

Utilizamos una caja <div id="cuadricula"> para definir el contenedor con la propiedad display: grid. Con la propiedad grid-template-columns, indicamos los anchos deseados para cada columna. El primer valor corresponde a la primera columna, el segundo valor corresponde a la segunda columna y así sucesivamente.

En este primer ejemplo, los valores se expresan en píxeles; por tanto, son fijos.

Estas son las reglas CSS:

<style> 
     #cuadricula { 
          display: grid; 
          grid-template-columns: 200px 400px 200px; 
          border: solid 1px #000; 
     } 
</style>
 

Esta es la estructura HTML:

<div id="cuadricula"> 
    <p>Praesent commodo...</p> 
    <p>Maecenas faucibus...</p> 
    <p>Fusce dapibus, tellus...</p> 
    <p>Nulla vitae elit libero...</p> 
    <p>Donec id elit non mi...</p> 
    <p>Duis mollis, est non commodo...</p> 
</div>
 

Los elementos inmediatamente hijos del contenedor, los párrafos <p>, se asignan automáticamente a los elementos de la cuadrícula. Por tanto...

1. Poner nombre a todas las celdas

En los ejemplos anteriores, los elementos de la cuadrícula se colocan automáticamente en les celdas, según el orden de las declaraciones. Ahora podremos poner nombre a todas las celdas de la cuadrícula y colocar el elemento de cuadrícula que queramos.

Esta es la estructura HTML:

<div id="cuadricula"> 
    <p class="p1">P1. Praesent commodo...</p> 
    <p class="p2">P2. Maecenas faucibus...</p> 
    <p class="p3">P3. Fusce dapibus...</p> 
    <p class="p4">P4. Nulla vitae...</p> 
    <p class="p5">P5. Donec id...</p> 
    <p class="p6">P6. Duis mollis...</p> 
</div>
 

Tenemos seis párrafos, y cada uno usa una clase dedicada: .p1 para el primer párrafo, p2 para el segundo, y así sucesivamente. Para localizar mejor la ubicación de los elementos, cada párrafo comienza por P1., P2....

Estas son las reglas CSS:

<style> 
     #cuadricula { 
          display: grid; 
          grid-template-columns: 300px 300px 300px; 
          grid-template-areas:    "C1 C2 C3"   
                                        "C4 C5 C6"; 
          border: solid 1px #000; 
     }   
     .p1 {   
          grid-area: C3;   
     }   
     .p2 {   
          grid-area: C5;   
     }   
     .p3 {   
          grid-area: C6;   ...

1. La justificación en las columnas

La propiedad justify-items permite gestionar la justificación de los contenidos en las columnas de la cuadrícula. Los contenidos pueden utilizar estos valores:

Para este primer ejemplo, la justificación es central. Estas son las reglas CSS:

<style>   
     #cuadricula {   
          display: grid;   
          grid-template-columns: 300px 300px 300px;   
          justify-items: center;   
          border: solid 1px #000;   
     }   
     p {   
          background-color: #eee;   
          margin: 0;   
     }   
     .pequeño {   ...

1. La justificación horizontal

Si establece anchos fijos para sus columnas, el ancho de la cuadrícula podrá ser más pequeño que el ancho del contenedor. En este caso, podemos gestionar la justificación horizontal de la cuadrícula en el contenedor.

En este ejemplo inicial, tenemos una cuadrícula de tres columnas con un tamaño fijo y tres filas. Esta cuadrícula tiene un borde con un grosor de 5 píxeles. Los elementos de la cuadrícula son los párrafos que tienen un borde y un fondo de color.

Estas son las reglas CSS que se utilizan:

<style>   
     #cuadricula {   
          display: grid;   
          grid-template-columns: 200px 200px 300px;   
          border: solid 5px #000;   
     }   
     p {   
          margin: 0;   
          background-color: #eee;   
          border: solid 1px #000;   
     }   
</style>
 

Esta es la estructura HTML:...