Exemples CSS Grid

                    
#example-1 {
    display: grid;
    grid-template-rows: 50% 50%;
}

#example-1 > section:first-of-type {
    background-color : orange;
}

#example-1 > section:last-of-type {
    background-color : teal;
}                    
                    
                

                    
#example-2 {
    display: grid;
    grid-template-columns: 50% 50%;
}

#example-2 > section:first-of-type {
    background-color : orange;
}

#example-2 > section:last-of-type {
    background-color : teal;
}                 
                    
                

                    
#example-3 {
    display: grid;
    grid-template-columns: repeat(4, 25%);
}

#example-3 > section:first-of-type {
    background-color : orange;
    grid-column : 1 / 4;
}

#example-3 > section:last-of-type {
    background-color : teal;
    grid-column: 4 / 5;
}                       
                    
                

                    
#example-4 {
    display: grid;
    grid-template-columns: repeat(10, 10%);
}

#example-4 > section:first-of-type {
    background-color : orange;
    grid-column : 1 / span 4;
}

#example-4 > section:last-of-type {
    background-color : teal;
    grid-column: 5 / span 6;
}
                    
                

                    
#example-5 {
    display: grid;
    grid-template-columns: 48% 48%;
    grid-template-rows: 48% 48%;
    row-gap:1%;
    column-gap:1%;
}

#example-5 > section:nth-of-type(odd) {
    background-color : orange;
}

#example-5 > section:nth-of-type(even) {
    background-color : teal;
}