main.css

.grid div {
    background: #ecf0f1;
    padding: 1em;
}

.grid > div:hover {
    border: 1px solid #f1c40f;
}

.grid {
    display: grid;
    /*grid-template-columns: 33% 33% 33%; //Ancho de columnas
    grid-template-rows: auto 100px;     //Ancho de Filas
    gap: 1em;    //separación de elementos
    column-gap: 1em;
    row-gap: 1em;
    grid-template-columns: 1fr 1fr 1fr 1fr;**/
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    grid-auto-rows: minmax(100px, auto);

    /*justify-items: stretch ; /*flexbox horizontal*/
    align-items: stretch;  /*flexbox vertical*/
}



.element1{
    grid-column: 1/4;
    /*align-self: flex-start;*/
}

.element2 {
    /*align-self: center;*/
    grid-column: 1/3;
    grid-row: 2/4
}

/*.element3 {
    align-self: flex-end;
}

.element4 {
    justify-self: flex-start;
}*/

.element5 {
    /*justify-self: center;*/
    grid-column: auto;
}

.element6 {
    /*justify-self: flex-end;*/
    grid-column: 2/4;
}

/*.nested-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    gap: 1em;
}

.nested-grid  div {
    border: 1px solid #000;
    background: #f1c40f;
    padding: 1em;
}*/