Horizontally scrollable grid

by Mdot

HTML

<div class="grid">
    <div class="cell">
        <div class="cool-stuff"></div>
    </div>
    <div class="cell">
        <div class="cool-stuff"></div>
    </div>
    <div class="cell">
        <div class="cool-stuff"></div>
    </div>
    <div class="cell">
        <div class="cool-stuff"></div>
    </div>
    <div class="cell">
        <div class="cool-stuff"></div>
    </div>
    <div class="cell">
        <div class="cool-stuff"></div>
    </div>
    <div class="cell">
        <div class="cool-stuff"></div>
    </div>
</div>

<hr>

<div class="grid-wrap">
    <div class="grid">
        <div class="cell">
            <div class="cool-stuff"></div>
        </div>
        <div class="cell">
            <div class="cool-stuff"></div>
        </div>
        <div class="cell">
            <div class="cool-stuff"></div>
        </div>
        <div class="cell">
            <div class="cool-stuff"></div>
        </div>
        <div class="cell">
            <div class="cool-stuff"></div>
        </div>
        <div class="cell">
            <div class="cool-stuff"></div>
        </div>
        <div class="cell">
            <div class="cool-stuff"></div>
        </div>
    </div>
</div>

CSS

.grid {
    display: grid;
    grid-auto-columns: 25%;
    grid-auto-flow: column;
    height: 150px;
    overflow-x: scroll;
}

.grid-wrap {
    overflow: hidden;
}

.grid-wrap .grid {
    margin-left: -5px;
    margin-right: -5px;
}

.cell {
    padding: 5px;
}

.cool-stuff {
    background: green;
    height: 100%;
    width: 100%;
}