body{
    margin: 0;
}


.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
} 



.carda {height: 200px;
        grid-column-start:1; grid-column-end:3;
        background-color: blue;}

.cardb {
        grid-column-start:3; grid-column-end:5;
        background-color: red;}

.cardc {
        grid-column-start:1; grid-column-end:2;
        background-color: green;}

.cardd {
        grid-column-start:2; grid-column-end:4;
        background-color: yellow;}

.carde {
        grid-column-start:4; grid-row-start:2; grid-row-end:4;
        background-color: purple;}

.cardf {
        grid-column-start:1; grid-column-end:2;
        background-color: orange;}

.cardg {
        grid-column-start:2; grid-column-end:4;
        background-color: pink;}

.cardh {
        grid-column-start:1; grid-column-end:2;
        background-color: cyan;}

.cardi {
        grid-column-start:2; grid-column-end:3;
        background-color: lightgray;}

.cardj {
        grid-column-start: 3; grid-column-end:5;
        background-color: magenta;}

.cardk {
        grid-column-start: 3; grid-column-end:5;
        background-color: lightblue;}