.container{
    display:grid;
    grid-template-areas:"1 . . ."
                        "2 3 4 3"
                        "6 7 . 8"
                        "9 . 10 ."
                        "11 . . .";  
    grid-gap: 20px;
    border:solid black 1 px;
}





/*pour exxercice 1*/
/*.grid-container { */
/*    display: grid; */
/*    border:solid black 1px;*/
/*    grid-template-columns: repeat(6, 1fr); */
/*    grid-template-rows: repeat(6, 1fr); */
/*    width:400px;*/
/*    height:400px;*/
/*    background-color:yellow;*/
/*}*/

    
/*.pti-container{*/
    
/*    grid-column-start:2;*/
/*    grid-column-end:5;*/
/*    grid-row-start:2;*/
/*    grid-row-end:4;*/
/*    border:solid black 1px;*/
/*    background-color:red;*/
    
/*}*/
/* .mini-container{   */
     
/*    grid-column-start:5;*/
/*    grid-column-end:5;*/
/*    grid-row-start:3;*/
/*    grid-row-end:6;*/
/*    border:solid black 1px;*/
/*    background-color:pink; }*/
    
/*.col1 { grid-column: 1 / span 1;*/
/*     border:solid black 1px; }*/

/*.col2 { grid-column: 2 / span 1; */
/*     border:solid black 1px;}*/

/*.col3 { grid-column: 3 / span 1;*/
/*      border:solid black 1px; }*/