CSS Grid Layout: Guía de Inicio Rápido

La forma en que enfocamos el maquetado en la web está cambiando, y el principal responsable de ese cambio es CSS Grid Layout (Maquetado de Grilla CSS). Ésta guía de inicio rápido omitirá los detalles y matices, para ayudarte a comprenderlo mejor, ahora mismo.

Tu Navegador

CSS Grid Layout (conocido por sus amigos como "Grid") es un trabajo en progreso, y por ello son muy pocos los navegadores que lo soportan. Para empezar a usarlo ahora, necesitarás usar IE11 (aunque éste utiliza una versión más antigua de la especificación), Microsoft Edge, Chrome Canary o Firefox Nightly.

Quizá el planteamiento más fácil es habilitar las Funciones Experimentales de Web Platform en Chrome: chrome://flags/#enable-experimental-web-platformfeatures.

Configurar una Grid (Grilla)

Grid nos permite arreglar elementos en una página, de acuerdo a regiones creadas por guías.

Terminología

La más simple es que éstas guías o líneas de grilla, son trazos de grilla horizontales o verticales. Los trazos de grilla sirven como filas y columnas, con medianiles corriendo a través de ellas. Donde se intersectan los trazos de grilla horizontales y verticales, forman celdas, muy similares a las que utilizamos en las tablas. Todos éstos son términos importantes para entender.

En la imagen de abajo verás una demostración de una grilla que muestra:

1. líneas de grilla
2. columnas
3. filas
4. celdas

Para un maquetado gráfco, podría verse más familiar si usamos exactamente la misma grilla, pero achicamos algunos trazos para que formen medianiles entre áreas de contenido.

1. medianiles

Hay un úlitmo término que necesitamos clarificar antes de continuar:

1. área de grilla

Una área de grilla es cualquier parte de nuestra grilla encerrada en cuatro líneas de grilla; puede abarcar cualquier número de celdas de la grilla.

¡Tiempo de crear ésta grilla en el navegador! Comencemos con algo de marcado.

Marcado para la Grilla

Para recrear la grilla de arriba, necesitamos un elemento contenedor, el que quieras:

1

<section class="grid-1">

2

3

</section>

En él vamos a colocar nueve elementos hijos.

1

<section class="grid-1">

2

  <div class="item-1">1</div>

3

  <div class="item-2">2</div>

4

  <div class="item-3">3</div>

5

  <div class="item-4">4</div>

6

  <div class="item-5">5</div>

7

  <div class="item-6">6</div>

8

  <div class="item-7">7</div>

9

  <div class="item-8">8</div>

10

  <div class="item-9">9</div>

11

</section>

Copia éste ejemplo de codepen si quieres darle seguimiento. He agregado algunos estilos básicos para visualizar de manera diferente cada elemento de la grilla.

Reglas de la Grilla

Primero necesitamos declarar que nuestro elemento contenedor es una grilla usando un nuevo valor para la propiedad display:

1

.grid-1 {

2

  display: grid;

3

}

Bien eso fue fácil. Luego necesitamos definir nuestra grilla, al indicar cuántos trazos de grilla tendremos, tanto horizontal como verticalmente. Hacemos eso con las propiedades grid-template-columns y grid-template-rows:

1

.grid-1 {

2

  display: grid;

3

  grid-template-columns: 150px 20px 150px 20px 150px;

4

  grid-template-rows: auto 20px auto 20px auto;

5

}

Notarás cinco valores para cada uno. Los valores para grid-template-columns señalan que "la primera columna debería ser de 150px de ancho, la segunda de 20px de ancho, la tercera de 150px", y así para las cinco columnas, más o menos correspondiendo a nuestra imagen de la bandera Finlandesa. Los cinco valores para grid-template-rows indican algo similar. Cada uno sería auto por defecto, tomando la altura del contenido, pero queremos ser más precisos con nuestros medianiles, dándoles una altura de 20px, así que necesitamos listar las cinco columnas.

Cada uno de nuestros elementos han sido asignados a una área de grilla en orden cronológico. No está mal, pero qué paso con los elementos 2, 4 y 7? Han caído en medianiles verticales, porque nuestros medianiles son trazos de grilla perfectamente legítimos y es donde el maquetado de grilla asumirá su pertenencia si no somos más específicos. Es momento de agregar algunas reglas a nuestros elementos.

Reglas de elementos

La sintaxis disponible para nosotros en éste punto puede ser muy compleja, pero vamos a hacer las cosas tan fáciles como sea posible al usar lo que realmente es una propiedad abrevidada. Comenzaremos con nuestro primer elemento, señalando que queremos que inicie en grid-column (columna de grilla) 1 y grid-row (fila de grilla) 1:

1

.item-1 {

2

  grid-column: 1;

3

  grid-row: 1;

4

}

Nuestro elemento automáticamente llenará el mínimo espacio disponible entre las líneas de grilla. Nuestro segundo elemento es un poco menos obvio. También queremos que éste inicie en grid-row (fila de grilla) 1, pero queremos que salte grid-column (columna de grilla) 2 e inicie en grid-column (columna de grilla) 3. La Columna 2 quedará vacía para formar nuestro medianil.

1

.item-2 {

2

  grid-column: 3;

3

  grid-row: 1;

4

}

Continuamos así, saltando nuestras columnas y filas que son medianiles eventualmente terminando con nuestro noveno elemento:

1

.item-9 {

2

  grid-column: 5;

3

  grid-row: 5;

4

}

Conclusión

¡Eso es todo, ya sabes como utilizar Grid! Recapitulemos los cuatro pasos esenciales:

1. Crear un elemento contenedor, y declararlo display: grid;
2. Usar el mismo contenedor para definir los trazos de grilla utilizando las propiedades grid-template-columns y grid-template-rows.
3. Colocar los elementos hijos en el contenedor.
4. Especificar donde pertenece cada hijo en la grilla al declarar su grid-column y grid-row.

En la próxima parte de ésta serie profundizaremos en la sintaxis de Grid, mejoraremos la forma que definimos nuestros medianiles, exploraremos maquetados flexibles, la unidad fr, la función repeat(), y desarrollaremos más nuestra grilla sencilla. ¡Nos vemos ahí!

Recursos Útiles sobre Grid

• @rachelandrew sigue a Rachel Andrew y comprenderás todo.