JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
    </ul>
</div>

CSS

html, body {
    height: 100%;
    text-align: center;
}
*, *:before, *:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
#wrapper {
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: aqua;
}
ul {
    height: 75%;
    list-style: none;
    display: flex;
    align-content: center;
    flex-direction: column;
    flex-wrap: wrap;
}
li {
    flex-basis: calc(100% / 3 - 2px);
    color: firebrick;
    border: 1px solid firebrick;
    background-color: greenYellow;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

JavaScript

function onResize() {

    var wrapper = document.querySelector('#wrapper');

    var items = wrapper.querySelectorAll('li');

    var columns = parseInt(Math.ceil(items.length / 3));

    var width = 200 * columns;

    wrapper.style.width = width > window.innerWidth ? width + 'px' : '100%';

}

onResize();

window.addEventListener('resize', onResize);