CSS Grid Minimal

Most basic CSS Grid setup

by the_voder

HTML

<p>This is the absolute minimum CSS required to setup a grid container item with fixed column-width and indeterminate number of rows.</p>

<div class="gridcontainer">
    <div>
        <p>ITEM 1</p>
    </div>
    <div>
        <p>ITEM 2</p>
    </div>
    <div>
        <p>ITEM 3</p>
    </div>
    <div>
        <p>ITEM 4</p>
    </div>
    <div>
        <p>ITEM 5</p>
    </div>
    <div>
        <p>ITEM 6</p>
    </div>
    <div>
        <p>ITEM 7</p>
    </div>
    <div>
        <p>ITEM 8</p>
    </div>
</div>

<p>The nice thing is, grid items don't need any grid-related CSS, and the container will automatically place it's children into consequtive grid cells</p>

CSS

.gridcontainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    grid-gap: 5px;
}

.gridcontainer > div {
    background-color: #eee;
    padding: 10px;
}