layout - 10

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #wrap {
            width: 1200px;
            margin: 0 auto;
        }
        #header {
            width: 100%;
            height: 100px;
            background: rgb(245, 180, 107);
        }
        #nav {
            width: 100%;
            height: 300px;
            background: rgb(202, 143, 76);
        }
        #contents {
            width: 100%;
            height: 400px;
            background: rgb(199, 133, 58);
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        .box1 {
            border: 1px solid #333;
            width: 150px;
            height: 150px;
            background: rgb(219, 129, 25);
            border-radius: 10px;
        }
        #footer {
            width: 100%;
            height: 100px;
            background: rgb(199, 124, 39);
        }
        @media(max-width: 1200px) {
            #wrap {
                width: 100%;
            }
            .box1:nth-child(9){
                display: none;
            }
            .box1:nth-child(10){
                display: none;
            }
        }
        @media(max-width: 768px) {
            #wrap {
                width: 100%;
            }
            .box1:nth-child(9){
                display: block;
            }
            #contents {
                height: 550px;
            }
        }
        @media(max-width: 480px) {
            #wrap {
                width: 100%;
            }
            #contents {
                height: 900px;
            }
            .box1:nth-child(10){
                display: block;
            }
        }
    </style>​

    <div id="wrap">
        <div id="header"></div>
        <div id="nav"></div>
        <section id="contents">
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
            <div class="box1"></div>
        </section>
        <div id="footer"></div>
    </div>