Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout

Consejo Rápido: Nombra tus Líneas de CSS Grid, Por Si Acaso

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
Understanding the CSS Grid “Auto-Placement Algorithm”
How to Use Implicit Track Sizing on Your CSS Grid

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

En cualquier CSS Grid cada línea tiene un número indice que podemos indicar para colocar elementos grid. Sin embargo, también podemos nombrar cada una de éstas líneas grid, haciendo más fácil trabajar con ellas y mantener nuestros maquetados grid. ¡Veamos!

Grid Viene en Camino

La respuesta más común a cualquier tutorial sobre Grid es "¿pero cuándo puedo usar ésto?" El hecho es: Grid viene en camino, y estará aquí pronto.

"CSS Grid va a ser soportado-por-defecto en Chrome y Firefox en Marzo de 2017." - Eric Meyer

Si no lo has consultado, ¡Ahora es el momento!

Números de Línea Grid

Cuándo declaramos un grid, a cada línea se le asigna un número índice:

Nota: A menos de que el maquetado sea establecido con direction: rtl; , éstos números comienzan en la parte superior izquierda de la grid o grilla, continuando su secuencia hasta la parte inferior derecha.

Podemos indicar éstos números para colocar elementos grid:

En éste ejemplo nuestro elemento .item es posicionado comenzando en la línea de la columna 2, línea de la fila 3:

Nombres Explícitos de la Línea de Grid

Con grillas más complejas, puedes imaginar que indicar todo por números podría ser un poco confuso. Por ésta razón, el módulo Grid nos permite nombrar explícitamente nuestras líneas cuándo declaramos nuestras columnas y filas de grid.

Usemos un ejemplo como los que hemos puesto a lo largo de ésta serie. Aquí está nuestra declaración básica de un grid de 3x3:

Ahora podemos encerrar nuestros valores de columna y fila con nombres de línea (cualquiera que queramos), usando corchetes:

Podemos ahora posicionar elementos con nombres, en lugar de números:

Algunas indicaciones:

  • Éstos nombres pueden ser adecuados a tus necesidades descriptivas, así que piensa lógicamente sobre lo que te ayudará a reconocer y recordar áreas de la grid o grilla.
  • Los números de línea originales continúan operando, así que todavía los puedes usar.
  • Puedes declarar múltiples nombres para una línea, por ejemplo: [main-end footer-start row-5] etc.
  • Incluso si nombras tus líneas grid, no estás obligado a usarlas, así que es un buen hábito "por si acaso" para adquirir.

Nombres Implícitos de Línea de Grid

Cuándo hacemos cosas deliberadamente, como nombrar líneas de grid, se dice que es explícito. Cuándo algo se da a entender, pero no se señala directamente, se dice que es implícito. Hemos cubierto explícitamente cómo nombramos las líneas grid pero también hay circunstancias dónde a las líneas se les dan nombres implícitamente.

Puedes recordar de un tutorial previo que es posible definir áreas grid.

Podríamos definir nuestras áreas grid así:

Ésto nos da lo siguiente:

Nombrar una área grid header automáticamente también asigna nombres a sus cuatro líneas fronterizas. Las líneas de filas alrededor de ella se convierten en header-start y header-end , e igualmente las dos líneas de columna también se convierten en header-start y header-end . Lo mismo aplica a las otras áreas, que se les da nombres de línea main-start , main-end , sidebar-start  etc.

Nota: Viendo las cosas en reversa, explícitamente agregar líneas nombradas en el mismo formato (header-start y header-end) creará una área grid llamada header.

Podemos usar éstos nombres de línea igual que lo hicimos previamente, para posicionar elementos. Y de nuevo, ellas existen además a cualquier nombre que definas, y los números de índice de línea originales.

Fin de la Línea

¡Eso es todo por éste consejo rápido! Recuerda: haz el hábito de nombrar tus líneas y áreas para un manejo y mantenimiento más fácil del grid.

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.