*{
    box-sizing: border-box;
}

.item{
    border: 1px solid #333;
    background-color: #777;
    color: yellow;
}
/*  */
.container{
    border: 1px solid rgb(93, 97, 82);
    background-color: rgb(139, 219, 186);
    display: grid;
    /* grid-template-columns: 1fr 3fr 2fr; */
    /* grid-template-columns: minmax(50px, auto) repeat(2, 1fr) 50px; */
    /* grid-template-rows: 50px 100px; */
    grid-template-rows: minmax(50px, auto) 100px;
    gap: 10px;
    grid-template-columns: repeat(3,300px);
    grid-auto-flow: row dense; /*Para evitar dejar huecos  */
    height: 70vh;
    justify-content: end;  /*horizontal align: center, end, start  */
    align-content: center; /* vertical align: center, end, start */
    justify-items: stretch; /* horizontal align: center, end, start */
    align-items:stretch; /* vertical : center, end, start */
    
}
/*  */
.item1{
    grid-column: span 2;
}
.item2{
    grid-column: span 2;
}
.item3{
/* grid-column-start: 1;
    grid-column-end: 3; */
    grid-row: 2;
    grid-column: 1 / -1;  /* Abarca todas las columnas */
}

.item4{

}
.item5{
    
}
.item6{
    
}

/* EJEMPLO CON GRID TEMPLATE AREAS */
.container2{
    display: grid;
    grid-template-columns: 100px 60px 75px;
    grid-template-rows: 50px 100px;
    /* grid-template: 50px 100px / 100px 50px;  Combined rows and columns*/
    grid-auto-columns: 300px 20px;
    /* grid-auto-rows: 300px 20px;  Same as above but for rows*/
    grid-auto-flow: row; /*by default is row*/
    grid-template-areas:
        "header header header"
        "sidebar content ."
        "sidebar content .";
}

.item11{
    grid-area: content;
}
.item21{
    grid-area: sidebar;
}
.item31{
    grid-area: header;
}

.item41{
    grid-area: content;
}
.item51{
    grid-area: content;
}
.item61{
    grid-area: content;
}