JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<div class="some_area">

  <div class="flex">
    <div class="box s1-2"> </div>
    <div class="box s1-2"> </div>
    <div class="box s1-4"> </div>
    <div class="box s1-4"> </div>
    <div class="box s1-4"> </div>
    <div class="box s1-4"> </div>
    <div class="box s1-2"> </div>
    <div class="box s1-2"> </div>
  </div>

</div>

<br/>

<div class="some_area">

  <div class="flex">
    <div class="box s1-2"> </div>
    <div class="box s1-2"> </div>
    <div class="box s1-4"> </div>
    <div class="box s1-4"> </div>
    <div class="box s1-4"> </div>
    <div class="box s1-4"> </div>
    <div class="box s1-2"> </div>
    <div class="box s1-2"> </div>
  </div>

</div>

CSS

.flex {
  display: -ms-flexbox;    
  display: -webkit-box;    
  display: -webkit-flexbox; 
  display: -webkit-flex;
  display: flex;  
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: -5px -4px; /* grid trick, has to match box margin */
}

.box {
    flex: 0 0 auto; /* auto is important because of an IE bug with box-size */
    height: 100px;
    display: inline-block;
    background-color: black;
    margin: 4px; /* spacing between boxes, matches parent element */
}

.s1-2{
  width: calc(50% - 10px); /* because of the IE bug we cannot use flex-basis and have to set the width */
}
.s1-4{
  width: calc(25% - 8px); /* because of the IE bug we cannot use flex-basis and have to set the width */
}


/* browser reset - because I can */
body, html{ 
  padding: 0;
  margin: 0;
  height: 100%;
}

.some_area{
  /* this is not necessary, it's just to prove that the flex-grid actually fits into the parent box. */
  position: relative;
  top: 20%;
  width: 80%;
  margin: auto;
  border: 3px solid red;
}