JSFiddle - React, Tailwind, and code Playground

by hrsetyono

HTML

<ul class="tile">
    <li><article></article></li>
    <li><article></article></li>
    <li><article></article></li>
    <li><article></article></li>
    <li><article></article></li>
    <li><article></article></li>
</ul>

CSS

/* Reset */
ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.tile {
  margin-right: -10px;
  margin-left: -10px;
}

  .tile * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

/* Clearfix */
.tile:before,
.tile:after {
  content: " ";
  display: table;
}

  .tile:after {
    clear: both;
  }

.tile li {
  float: left;
  width: 33.3333%;
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 20px;
}

  .tile li:nth-child(3n+1) {
    clear: both;
  }

  .tile article {
    background-color: #333;
    height: 30px;
  }

@media only screen and (max-width: 360px) {
  .tile li {
    width: 50%;
  }
    
    .tile li:nth-child(n) {
        clear: none;
    }
    
    .tile li:nth-child(2n+1) {
        clear: both;
    }
}