Untitled

<!DOCTYPE html>
    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            [class*='col-'] {
                background-color: salmon;
                border: 1px solid tomato;
                font-family: sans-serif;
                padding-top: 40px;
                margin: 5px;
                text-align: center;
            }
            .container {
                display: flex;
                flex-flow: row wrap;
                justify-content: space-between;
                flex: 1;
            }
            .col-1-2 {
                width: 49%;
           }
            .col-1-3 {
                width: 32.3%;
            }

            .col-1-4 {
                width: 24%;
            }
            .col-1-5 {
                width: 19%;
            }
            .col-1-6 {
                width: 15.6%;
            }
            .col-1-7 {
                width: 13.2%;
            }
            .col-1-8 {
                width: 11.5%;
            }
            .col-1-9 {
                width: 10.1%;
            }
            .col-1-10 {
                width: 9%;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="col-1-2">Two Boxes</div>
            <div class="col-1-2">Two Boxes</div>
            <div class="col-1-3">Three Boxes</div>
            <div class="col-1-3">Three Boxes</div>
            <div class="col-1-3">Three Boxes</div>
            <div class="col-1-4">Four Boxes</div>
            <div class="col-1-4">Four Boxes</div>
            <div class="col-1-4">Four Boxes</div>
            <div class="col-1-4">Four Boxes</div>
            <div class="col-1-5">Five Boxes</div>
            <div class="col-1-5">Five Boxes</div>
            <div class="col-1-5">Five Boxes</div>
            <div class="col-1-5">Five Boxes</div>
            <div class="col-1-5">Five Boxes</div>
            <div class="col-1-6">Six Boxes</div>
            <div class="col-1-6">Six Boxes</div>
            <div class="col-1-6">Six Boxes</div>
            <div class="col-1-6">Six Boxes</div>
            <div class="col-1-6">Six Boxes</div>
            <div class="col-1-6">Six Boxes</div>
            <div class="col-1-7">Seven Boxes</div>
            <div class="col-1-7">Seven Boxes</div>
            <div class="col-1-7">Seven Boxes</div>
            <div class="col-1-7">Seven Boxes</div>
            <div class="col-1-7">Seven Boxes</div>
            <div class="col-1-7">Seven Boxes</div>
            <div class="col-1-7">Seven Boxes</div>
            <div class="col-1-8">Eignt Boxes</div>
            <div class="col-1-8">Eignt Boxes</div>
            <div class="col-1-8">Eignt Boxes</div>
            <div class="col-1-8">Eignt Boxes</div>
            <div class="col-1-8">Eignt Boxes</div>
            <div class="col-1-8">Eignt Boxes</div>
            <div class="col-1-8">Eignt Boxes</div>
            <div class="col-1-8">Eignt Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-9">Nine Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
            <div class="col-1-10">Ten Boxes</div>
        </div>
    </body>
</html>