Edit in JSFiddle

<h1>The Waffle Object</h1>

<div class="box">
    <div class="o-waffle">
        <div class="o-waffle__item"><p>One</p></div>
        <div class="o-waffle__item"><p>Two</p></div>
        <div class="o-waffle__item"><p>Three</p></div>
        <div class="o-waffle__item"><p>Four</p></div>
        <div class="o-waffle__item"><p>Five</p></div>
        <div class="o-waffle__item"><p>Six</p></div>
        <div class="o-waffle__item"><p>Seven</p></div>
        <div class="o-waffle__item"><p>Eight</p></div>
        <div class="o-waffle__item"><p>Nine</p></div>
        <div class="o-waffle__item"><p>Ten</p></div>
        <div class="o-waffle__item"><p>Eleven</p></div>
        <div class="o-waffle__item"><p>Twelve</p></div>
    </div>
</div>

<h2>Wider-column variant</h2>

<div class="box">
    <div class="o-waffle o-waffle--wider">
        <div class="o-waffle__item"><p>One</p></div>
        <div class="o-waffle__item"><p>Two</p></div>
        <div class="o-waffle__item"><p>Three</p></div>
        <div class="o-waffle__item"><p>Four</p></div>
        <div class="o-waffle__item"><p>Five</p></div>
        <div class="o-waffle__item"><p>Six</p></div>
        <div class="o-waffle__item"><p>Seven</p></div>
        <div class="o-waffle__item"><p>Eight</p></div>
        <div class="o-waffle__item"><p>Nine</p></div>
        <div class="o-waffle__item"><p>Ten</p></div>
        <div class="o-waffle__item"><p>Eleven</p></div>
        <div class="o-waffle__item"><p>Twelve</p></div>
    </div>
</div>

/* ==========================================================================
   #WAFFLE OBJECT
   ========================================================================== */


/**
 * The waffle object aligns items in a grid. It should be the full width of the
 * container, even taking into account the negative margins.
 */

.o-waffle {

    --o-waffle-columns: 4;
    --o-waffle-item-width: calc(100% / var(--o-waffle-columns));
    --o-waffle-spacing: 0.5em;

    display: flex;
    flex-flow: row wrap;
    margin: calc(var(--o-waffle-spacing) / -2);
    width: calc(100% + var(--o-waffle-spacing));

}

.o-waffle__item {
    margin: calc(var(--o-waffle-spacing) / 2);
    width: calc(var(--o-waffle-item-width) - var(--o-waffle-spacing));
}

.o-waffle--wider {
    --o-waffle-columns: 3;
}


/* ==========================================================================
   #PAGE STYLES
   ========================================================================== */
p {
    background-color: pink;
    margin: 0;
}

.box {
    border: 1px solid #000;
    margin-bottom: 1em;
}