Cuando se crea una cuadrícula CSS (grid), de forma indirecta se forman unas líneas que son las que dividen la cuadrícula en filas y columnas. Por defecto, estas líneas tienen un número asignado empezando por el 1 en la esquina superior izquierda, usado para referirse a ellas cuando sea necesario.
Puede ser útil cuando se trata de distribuir filas y columnas en una cuadrícula y cuando se quiere ajustar elementos de forma irregular dentro de ella.
Poner nombres a las líneas que dividen las cuadrículas CSS (grid) en celdas puede ser muy útil. Con ello se obtiene una forma más descriptiva de referirse a las líneas de la cuadrícula, ya que los números son más abstractos. Esto mejora la legibilidad del código CSS, sobre todo en diseños complejos.
Hay que tener en cuenta que nombrar líneas es un recurso completamente opcional, aunque de gran utilidad. Puede ser muy beneficioso utilizarlo en diseños más complejos o cuando se necesite una mejor comprensión y claridad del código. De hecho, su uso facilita el mantenimiento del código.
Definir nombres de líneas
Los nombres de línea se definen mediante las propiedades grid-template-rows y grid-template-columns, extendiendo la sintaxis que se describe en el artículo dedicado a la distribución de elementos en una cuadrícula. Por tanto, los nombres de línea se definen en el elemento contenedor (padre).
Haciendo memoria del uso de estas dos propiedades: sus valores son el tamaño de las filas y las columnas, respectivamente. Tantos valores, tantas filas o columnas se van a distribuir en la cuadrícula. Por ejemplo: 1fr 1fr serán dos filas o columnas con el mismo tamaño distribuido de forma equitativa.
Los nombres de las líneas deben estar especificados entre corchetes en el lugar que geométricamente se encuentran realmente. Teniendo en cuenta que los valores por defecto son los números, la sintaxis sería la siguiente:
.cuadricula {
grid-template-rows: [1] 1fr [2] 1fr [3];
grid-template-columns: [1] 1fr [2] 1fr [3];
}
Vamos a usar nombres más creativos:
.cuadricula {
grid-template-rows:
[r-start] 1fr [r-mid] 1fr [r-end];
grid-template-columns:
[c-start] 1fr [c-mid] 1fr [c-end];
}
En este ejemplo, el valor ha sido ubicado en la línea siguiente para que quepa en el contenedor y facilitar la lectura en dispositivos móviles.
Con esta nomenclatura, estamos usando los prefijos r de rows (filas) y c de columns (columnas) para indicar si es una línea de filas o columnas. A la vez, con los sufijos start, mid y end indicamos si es la primera, la del medio o la última línea. Se trata de ser original y que los nombres sean fáciles de recordar.
Si tuviéramos tres columnas, podríamos usar los nombres c-start para la primera línea, c-m-start para la segunda, c-m-end para la tercera y, finalmente, c-end para la última. La m intercalada se refiere a la columna central.
Usar nombres de líneas
Una vez se ha definido los nombres de las líneas, se pueden usar para delimitar las zonas de la cuadrícula mediante las cuatro propiedades CSS siguientes: grid-column-start, grid-column-end, grid-row-start y grid-row-end descritas en el artículo para realizar ajustes en celdas. En efecto, se usan directamente sobre los elementos hijos (ítems) de la cuadrícula.
Por tanto, también se pueden usar a través de las abreviaturas grid-column, para el eje de las columnas, y grid-row, para el eje de las filas. Y como es de esperar, también se pueden usar con grid-area, que sirve de abreviatura (shorthand) para indicar el principio y el final de las filas y las columnas.
Ahora, en vez de usar números enteros para indicar la posición de principio y final de una celda, tanto para el eje horizontal como para el eje vertical, se puede usar los nombres de las líneas previamente definidos.
Por ejemplo, podemos indicar que la celda empieza en la línea c-start y termina en la celda c-end, ocupando dos columnas enteras. Así:
.item {
grid-column: [c-start] [c-end];
}
Vamos a ver un ejemplo un tanto más elaborado con tres filas y tres columnas, creando un total de nueve celdas en las que se va a ajustar su distribución. Por tanto, hay nueve elementos hijos (ítems) para distribuir.
Código CSS:
.cuadricula {
display: grid;
grid-template-columns:
[c-start] 1fr
[c-m-start] 1fr
[c-m-end] 1fr
[c-end];
grid-template-rows:
[r-start] 1fr
[r-m-start] 1fr
[r-m-end] 1fr
[r-end];
}
.item {
background: salmon;
border: 1px solid black;
color: black;
}
.item-1 {
background: goldenrod;
grid-column-start: c-start;
grid-column-end: c-m-end;
}
.item-3 {
background: lightgreen;
grid-column-start: c-m-end;
grid-column-end: c-end;
grid-row-start: r-m-end;
grid-row-end: r-end;
}
.item-4 {
background: mediumpurple;
grid-column-start: c-m-start;
grid-column-end: c-end;
}
.item-7 {
background: deepskyblue;
grid-row-start: r-m-start;
grid-row-end: r-end;
}
Código HTML:
<div class="cuadricula">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
Resultado:
123456789
