Grid

<style>
    .demo-grid {
        margin-top: 0;
    }

    .demo-grid-inner {
        position: relative;
        display: flex;
        justify-content: space-between;
        flex-flow: row wrap;
        height: 100vh;
        padding-left: 2.4rem;
        padding-right: 2.4rem;
        box-sizing: content-box;
        max-width: 134.4rem;
        margin-left: auto;
        margin-right: auto;
        background-color: rgba(14, 109, 14, 0.1);
    }

    .demo-grid-inner::before {
        /* Document center */
        content: "";
        position: absolute;
        left: calc(50% - 1px);
        width: 1px;
        height: 100%;
        background: #bbbbbb;
        opacity: 0.6;
    }

    .demo-grid-inner::after {
        /* Baseline grid */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0.4;
        background-image: linear-gradient(to bottom, cyan 0, transparent 1px);
        background-repeat: repeat-y;
        background-size: 100% 2.5rem;
    }

    .demo-grid-inner div {
        width: calc(4.16667% - 2.3rem);
        height: 100%;
        margin-top: 0;
        background-color: rgba(255, 192, 203, 0.2);
    }

    @media screen and (min-width: 900px) {
        .demo-grid-inner {
            padding-left: 4.8rem;
            padding-right: 4.8rem;
        }
    }
</style>

<div class="demo-grid">
    <div class="demo-grid-inner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>