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.

html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
css
.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.

Diagrama mostrando la cuadrícula con líneas numeradas.

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.

html
<div class="wrapper">
  <div class="item">Item</div>
</div>
css
.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.

html
<div class="wrapper">
  <div class="item">Item</div>
</div>
css
.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