Líneas de Cuadrícula
Las Líneas de Cuadrícula se crean cuando defines las Pistas de Cuadrícula esto sucede dentro de un contenedor que este usando CSS Grid Layout.
En el siguiente ejemplo hay una cuadrícula con tres pistas de columna y dos pistas de filas. Esto nos da 4 Líneas de Columnas y 3 Líneas de Fila.
<div class="wrapper">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
Podemos referenciar a Las Líneas de nuestra plantilla usando su número de línea. De manera izquierda-a-derecha y de arriba-a-abajo; la línea 1 de la columna 1 estará en la izquierda de la cuadrícula, la línea 1 de la fila 1 estará al inicio de la cuadrícula. Los números de líneas siguen el tipo de "modo de escritura" de el documento, por ejemplo, si es de derecha-a-izquierda, la columna 1 estará a la derecha de la cuadrícula. La imagen de abajo muestra, en fondo gris los números de línea, asumiendo que el "modo de escritura" es de izquierda-a-derecha.
Las líneas también se crean en la cuadrícula implícita cuando se crean pistas implícitas para mantener el contenido posicionado fuera de la cuadrícula explícita, sin embargo, estas líneas no se pueden abordar mediante un número.
Ubicar elementos en la cuadrícula usando el número de línea
Al crear una cuadrícula usted puede ubicar los elementos dentro de ésta, usando los números de líneas.
En el siguiente ejemplo, el elemento está posicionado desde la línea de columna 1 hasta la línea de columna 3 y desde la línea de fila 1 hasta la línea de fila 3.
<div class="wrapper">
<div class="item">Item</div>
</div>
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}
.item {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
Nombrando las líneas
Las líneas creadas en la cuadrícula explícita, pueden ser nombradas, asignándoles un nombre dentro de corchetes antes o después de la información del tamaño de pistas. Así podemos utlizar estos nombres como referencia para cada línea en vez de utilizar los números de línea.
<div class="wrapper">
<div class="item">Item</div>
</div>
.wrapper {
display: grid;
grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
grid-column-start: col1-start;
grid-column-end: col3-start;
grid-row-start: row1-start;
grid-row-end: rows-end;
}
Aprende Más
Propiedades de referencia
Otras lecturas
- Guía de Grid Layout CSS: Conceptos básicos de grid layout
- Guía de Grid Layout CSS: Colocación basada en línea con Grid CSS
- Guía de Grid Layout CSS: Diseño usando líneas de cuadrícula con nombre
- Guía de Grid Layout CSS: Cuadrículas CSS, Valores Lógicos y Modos de Escritura
- Definición de Línea de Cuadrícula en la especificación de Grid Layout CSS