Display Flex - A grid of equals

by agib

HTML

<ul class="grid-list">
    <li class="grid-item">1</li>
    <li class="grid-item">2</li>
    <li class="grid-item">3</li>
    <li class="grid-item">4</li>
    <li class="grid-item">5</li>
    <li class="grid-item">6</li>
    <li class="grid-item">7</li>
    <li class="grid-item">8</li>
    <li class="grid-item">9</li>
    <li class="grid-item">10</li>
    <li class="grid-item">11</li>
    <li class="grid-item">12</li>
    <li class="grid-item">13</li>
    <li class="grid-item">14</li>
    <li class="grid-item">15</li>
    <li class="grid-item">16</li>
    <li class="grid-item">17</li>
</ul>

CSS

.grid-list {
    width: 100%;
    list-style-type: none;  
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    flex-wrap: wrap;
}

.grid-item {
    width: 260px;
    background-color: red;
    height: 200px;
    margin: 0 10px 20px 10px;
}