Advertisement
  1. Web Design
  2. CSS Grid Layout

CSS Grid Layout: Usando Áreas de Grilla

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
CSS Grid Layout: Fluid Columns and Better Gutters
CSS Grid Layout: Going Responsive With auto-fill and minmax()

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Una cosa que hemos mencionado, ,pero que tenemos todavía que cubrir adecuadamente en ésta serie son las grid areas o áreas de grilla. Hasta ahora nuestros elementos grid o elementos de grilla han sido contenidos dentro de una celda de grilla, pero no podemos lograr maquetados más útiles al traspasar esas fronteras. ¡Veamos!

Definiendo las Áreas de Grilla

Aquí está la grilla en la que estamos trabajando: nueve elementos grid automáticamente colocados dentro de tres columnas iguales, tres filas iguales, separadas por medianiles de 20px.

Actualmente nuestros elementos sólo tienen estilos de color, pero retornemos a lo que aprendimos en el primer tutorial y agreguemos algunas reglas grid-column y grid-row, ésta vez con algo extra:

En ésta declaración abreviada de grid-column estamos usando eficazmente grid-column-start y grid-column-end, diciéndole al elemento que inicie en la línea de grilla 1 y finalice en la línea de grilla 3.

grid lines
Líneas de Grilla 1 y 3

Aquí está el resultado; el primer elemento ahora abarca dos celdas, empujando a los otros elementos a la derecha y hacia abajo de acuerdo al algoritmo de colocación automática de Grid.

Lo mismo puede hacerse con filas, que nos dan una área mucho más grande en la parte superior izquierda de nuestra grilla.

Expandiendo Celdas

Utilizando la que es quizá una sintaxis más fácil podemos cambiar grid-column-end por la palabra reservada span. Con span no estamos atados a especificar donde finaliza el área, en lugar definimos cuántos trazos el elemento debe abarcar:

Ésto nos da el mismo resultado final, pero si fuéramos a cambiar donde queremos que inicie el elemento ya no estaríamos obligados a cambiar el final.

En el siguiente demo puedes ver que hemos vaciado el maquetado al remover cuatro de los elementos. Hemos declarado posicionamiento en dos de nuestros cuatro elementos: el primero se expande dos columnas y dos filas, mientras que el cuarto inicia en la columna 3, fila 2, y se expande hacia abajo dos trazos:

Los elementos restantes llenan el espacio disponible automáticamente. Ésto resalta perfectamente cómo un grid layout (maquetado grid) no tiene que reflejar el orden original de los elementos.

Nota: hay muchas situaciones donde el orden original absolutamente debe reflejar la presentación-no olvides la accesibilidad.

Áreas Nombradas

Usar los métodos de numeración que hemos descrito funcionan bien hasta ahora, pero Grid Template Areas puede hacer aún más intuitiva la definición de maquetados.

Específicamente, nos permite nombrar áreas en la grilla. Con esas áreas nombradas, podemos hacer referencia a ellas (en lugar de números de línea) para posicionar nuestros elementos. Apeguémonos a nuestro demo actual por el momento y usémoslo para hacer un maquetado rústico que comprenda:

  • header (cabecera)
  • main content (contenido principal)
  • sidebar (barra lateral)
  • footer (pie de página)

Definimos éstas áreas en nuestro contenedor grid, casi como si los alargáramos:

Posicionando los elementos

Ahora podemos centrar nuestra atención en los elementos, dejando a un lado las reglas grid-column y grid-row en favor de grid-area :

Nuestro primer elemento es incluído en el header (cabecera), abarcando las tres columna del header. Nuestro segundo elemento es asignado al área de main content (contenido principal), el tercero se convierte en nuestra sidebar (barra lateral), y el cuarto en nuestro footer (pie de página). Y éstos tampoco necesitan seguir el orden original -.item-4 podría ser posicionado fácilmente en el area del header.

Como puedes ver, ésto hace que el maquetado de la página sea mucho más fácil. De hecho, si quisiéramos representar visualmente nuestras grillas, ¡¿por qué no vamos más allá y usamos emojis?

Anidando Áreas de Grilla

Una página web dada contendrá toda clase de componentes anidados, así que veamos cómo funciona con Grid.

Cuando declaramos un contenedor grid display:grid; sólo sus descendientes directos se convierten en elementos grid. El contenido que añadimos a éstos elementos hijos no será afectado por Grid a menos que nosotros lo especifiquemos.

En nuestro ejemplo, vamos a agregar .item-5, .item-6 , y .item-7 de nuevo en el marcado, anidándolos en .item-2 .

Así que ahora necesitamos declarar nuestro .item-2 también un contenedor grid, configurando su grilla con dos columnas y dos filas.

Podemos usar los nombres "header", "article", y "sidebar" de nuevo aquí, no hay confusión, porque todo permanece en contexto. Éstas áreas de grilla sólo aplican a la grilla dentro de .item-2 .

Conclusión

Para resumir de lo que hemos estado hablando:

  1. grid-column nos ofrece una forma abreviada de definir dónde inicia y dónde termina un elemento.
  2. También podemos usar la palabra reservada span para hacer nuestras reglas más flexibles.
  3. grid-template-areas nos da el poder de nombrar nuestras áreas de grilla (incluso utilizando emojis si queremos).
  4. También podemos anidar grillas al declarar los elementos de la grilla como display:grid; y seguir el mismo proceso.

Una vez más hemos aprendido algunos aspectos útiles de la especificación CSS Grid Layout, ¡y cada vez más nos acercamos a casos de uso en el mundo real! En el próximo tutorial veremos maquetado más complejos y cómo el diseño responsivo encaja en la ecuación.

Recursos Útiles

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.