Share
En cualquier cuadrícula de CSS, cada línea tiene un número de índice al que podemos hacer referencia para colocar elementos de cuadrícula. Sin embargo, también podemos nombrar cada una de estas líneas de cuadrícula, facilitando el trabajo y el mantenimiento de nuestros diseños de cuadrícula. Vamos a ver!
La respuesta más común a cualquier tutorial de Grid es "pero ¿cuándo puedo usar esto?" Y es una pregunta justa. El hecho es: Grid es viene, y estará aquí pronto.
"CSS Grid se convertirá de forma predeterminada en Chrome y Firefox en marzo de 2017". - Eric Meyer
Si aún no lo has visto, ahora es el momento!
Cuando declaramos una cuadrícula, a cada línea se le asigna un número de índice:
Nota: A menos que el diseño esté configurado con dirección: rtl;, estos números comienzan en la parte superior izquierda de la cuadrícula, abriéndose camino hacia la parte inferior derecha.
Podemos hacer referencia a estos números para colocar elementos de la cuadrícula:
.item grid-column: 2; fila de la cuadrícula: 3;
En este ejemplo nuestro .ít El elemento se coloca a partir de la línea 2 de la columna y la línea 3 de la fila:
Con cuadrículas más complejas, puedes imaginar que hacer referencia a todo por números puede resultar un poco confuso. Por este motivo, el módulo de cuadrícula nos permite nombrar explícitamente nuestras líneas cuando declaramos nuestras columnas y filas de cuadrícula.
Vamos a usar un ejemplo como los que hemos usado en esta serie. Aquí está nuestra declaración básica de cuadrícula de 3 × 3:
.grid-1 display: grid; rejilla-plantilla-columnas: 100px auto 100px; cuadrícula-plantilla-filas: 60px 130px 50px; rejilla: 20px;
Ahora podemos envolver nuestros valores de columna y fila con nombres de línea (independientemente de qué diablos queramos), utilizando corchetes:
.grid-1 display: grid; cuadrícula-plantilla-columnas: [inicio] 100px [inicio central] auto [última columna-inicio] 100px [acabado]; grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end]; rejilla: 20px;
Ahora podemos colocar artículos con nombres, en lugar de números:
.item grid-column: center-start; fila de la cuadrícula: encabezado de inicio;
Algunos punteros:
Accentsconagua
[pie principal-pie-inicio fila-5] etc.Cuando hacemos cosas deliberadamente, como nombrar líneas de cuadrícula, se dice que es explícito. Cuando algo está implícito, pero no se establece directamente, eso se conoce como ser implícito. Hemos cubierto explícitamente el nombramiento de líneas de cuadrícula, pero también hay circunstancias en las que las líneas reciben nombres implícitamente.
Puede recordar de un tutorial anterior que es posible definir áreas de cuadrícula.
Podríamos definir cuatro áreas de cuadrícula como esta:
.grid-1 / *… estilos existentes * / grid-template-areas: "header header header" "barra lateral principal" "footer footer footer";
Esto nos da lo siguiente:
Nombrar un área de cuadrícula encabezamiento Asigna automáticamente nombres a sus cuatro líneas de límite también. Las líneas de hilera a su alrededor se vuelven encabezado de inicio y encabezado final, Y asimismo las dos líneas de columna también se convierten. encabezado de inicio y encabezado final. Lo mismo se aplica a las otras áreas, a las que se les da nombres de línea inicio principal, extremo principal, barra lateral de inicio y así.
Nota: Mirando a la inversa, agregando explícitamente líneas con nombre en el mismo formato (encabezado de inicio y encabezado final) creará un área de cuadrícula con nombre de encabezamiento.
Podemos usar estos nombres de línea como lo hemos hecho anteriormente, para posicionar elementos. Y nuevamente, existen además de cualquier nombre que usted defina, y los números de índice de línea originales.
Eso es todo por este consejo rápido! Recuerde: adquiera el hábito de nombrar sus líneas y áreas para facilitar la administración y el mantenimiento de la red..
