* {margin: 0; padding: 0; border: 0; box-sizing: border-box}


@media only screen and (min-width: 1200px) {
    body {
        background-color: rosybrown;
        display: flex;
        width: 600px;
        justify-content: center;
        flex-flow: row wrap;
        margin: 10px auto;
    }

    div {
        width: 200px;
        height: 200px;
        border: 2px solid white;
        /* margin: 0px auto; */
    } 

    body div:nth-child(1) {
        background-color: tomato;
    }
    body div:nth-child(2) {
        background-color: thistle;
    }
    body div:nth-child(3) {
        background-color: tan;
    }
    body div:nth-child(4) {
        background-color: teal;
    }
    body div:nth-child(5) {
        background-color: seashell;
    }
    body div:nth-child(6) {
        background-color: skyblue;
    }
    body div:nth-child(7) {
        background-color: silver;
    }
    body div:nth-child(8) {
        background-color: steelblue;
    }
    body div:nth-child(9) {
        background-color: salmon;
    }
    
}

@media only screen and (min-width: 600px) and (max-width: 1200px) {
    body {
        background-color: rosybrown;
        display: flex;
        width: 400px;
        justify-content: center;
        flex-flow: row wrap;
        margin: 10px auto;
    }

    div {
        width: 200px;
        height: 200px;
        border: 2px solid white;
        /* margin: 0px auto; */
    } 

    body div:nth-child(1) {
        background-color: tomato;
    }
    body div:nth-child(2) {
        background-color: thistle;
    }
    body div:nth-child(3) {
        background-color: tan;
    }
    body div:nth-child(4) {
        background-color: teal;
    }
    body div:nth-child(5) {
        background-color: seashell;
    }
    body div:nth-child(6) {
        background-color: skyblue;
    }
    body div:nth-child(7) {
        background-color: silver;
    }
    body div:nth-child(8) {
        background-color: steelblue;
        /* display: none; */
    }
    body div:nth-child(9) {
        /* background-color: salmon; */
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    body {
        background-color: rosybrown;
        display: flex;
        width: 200px;
        justify-content: center;
        flex-flow: row wrap;
        margin: 10px auto;
    }

    div {
        width: 200px;
        height: 200px;
        border: 2px solid white;
        /* margin: 0px auto; */
    } 

    body div:nth-child(1) {
        background-color: tomato;
    }
    body div:nth-child(2) {
        background-color: thistle;
    }
    body div:nth-child(3) {
        background-color: tan;
    }
    body div:nth-child(4) {
        background-color: teal;
    }
    body div:nth-child(5) {
        background-color: seashell;
    }
    body div:nth-child(6) {
        background-color: skyblue;
    }
    body div:nth-child(7) {
        /* background-color: silver; */
        display: none;
    }
    body div:nth-child(8) {
        /* background-color: steelblue; */
        display: none;
    }
    body div:nth-child(9) {
        /* background-color: salmon; */
        display: none;
    }
}

/* 1200 up 3x3 */
/* 600-1200 4x2*/
/* 600down 6x1 */