Grid linename

<< Grid por áreas gap y alineación >>

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.

<< Grid por áreas gap y alineación >>