/* mobile first */

.container{
    background-color: cornflowerblue;

    display: grid;
    grid-template-columns:repeat(3, 1fr);
    grid-template-rows:repeat(3, 1fr);
}

.container .block {
    margin: 20px;
    padding: 20px;
    background-color: white;
}

/* desktop, met overerving van mobile first (bv. bg.-color & display, ...) */

@media screen and (min-width: 700px) {
    .container{
        grid-template-columns:repeat(5, 1fr);
        grid-template-rows:repeat(5, 1fr);
    }

    .block.block1 {
        grid-column-start: 1;
        grid-row-start: 1;
    }

    .block.block2 {
        grid-column-start: 5;
        grid-row-start: 5;
    }

    .block.block3 {
        grid-column-start: 1;
        grid-row-start: 5;
    }

    .block.block4 {
        grid-column-start: 5;
        grid-row-start: 1;
    }

    .block.block5 {
        grid-column-start: 3;
        grid-row-start: 3;
    }

    .block.block6 {
        grid-column-start: 2;
        grid-row-start: 2;
    }

    .block.block7 {
        grid-column-start: 4;
        grid-row-start: 4;
    }

    .block.block8 {
        grid-column-start: 4;
        grid-row-start: 2;
    }

    .block.block9 {
        grid-column-start: 2;
        grid-row-start: 4;
    }
}