JSFiddle - React, Tailwind, and code Playground

by Sasha Morozov

HTML

<ul class="grid-list">
    <li class="grid-list__list-item">
        <div class="grid-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, incidunt!</div>
    </li>
    <li class="grid-list__list-item">
        <div class="grid-list__item">Lorem ipsum dolor sit amet.</div>
    </li>
    <li class="grid-list__list-item">
        <div class="grid-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt iusto explicabo illo perspiciatis magnam et libero perferendis aut sed saepe.</div>
    </li>
    <li class="grid-list__list-item">
        <div class="grid-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    </li>
    <li class="grid-list__list-item">
        <div class="grid-list__item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptate ullam, illo optio perferendis quia dignissimos distinctio provident, doloribus molestiae voluptatibus neque voluptatum.</div>
    </li>
</ul>

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.grid-list {
    list-style-type: none;
    margin: -10px;
    padding: 0;    
    display: -webkit-box; 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;    
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;    
        &__list-item {
            width: (100%/3);
            padding: 10px;
            
            // 1. Uncomment the properties, to fill the container to the remaining width.
            /* -webkit-box-flex: 1; */ 
            /* -webkit-flex-grow: 1; */
            /* -ms-flex-positive: 1; */
            /* flex-grow: 1; */
            
            // 2. Uncomment the properties, to fill the container.
            /* display: -webkit-box; */ 
            /* display: -webkit-flex; */
            /* display: -ms-flexbox; */
            /* display: flex; */ 
        }
        &__item {
            background-color: #ddd;
            padding: 10px;
            
            // 2. Uncomment the properties, to fill the container.
            /* -webkit-box-flex: 1; */
            /* -webkit-flex: 1 1 auto; */
            /* -ms-flex: 1 1 auto; */
            /* flex: 1 1 auto; */
        }
}