Grid linename
Las líneas en grid son las divisiones o líneas separadoras de cada celda(tanto en horizontal como en vertical). Estos nombres que le damos a las líneas reciben el nombre de linename o nombres de línea. Para definirías usaríamos los métodos vistos anteriormente de grid-template-columns y grid-template-rows. Para darle nombre a esa línea lo que hacemos es indicar el nombre entre corchetes seguido de la columna/fila en la que se define y tras usarlas en el template, podemos usarlas en el grid-column y grid-row. Veamos un ejemplo en donde podemos darle nombre a las líneas de un grid.
.container{
margin: auto;
margin-top: 10px;
border: 1px solid red;
width: 95vw;
height: 50vh;
display: grid;
grid-template-columns: [col1] 150px [col2] 150px [col3] 150px;
grid-template-rows: [fil1] 60px [fil2] 60px [fil3] 60px;
}
.items{
border: 2px solid blue;
width: 80px;
}
.item1{
grid-column: col2/ span 2;
grid-row: fil3;
}
.item2{
grid-column: col1;
grid-row: fil1;
}
.item3{
grid-column: col3;
grid-row: fil1;
}
.item4{
grid-column: col2;
grid-row: fil2;
}Bonus: grid-auto-columns, grid-auto-flow, grid-auto-rows.