Mosaico com Flexbox CSS

by Vinicius Colares

HTML

<section class="container">
  <div class="coluna">
    <div class="tile red">Elemento 1 <br> com <br>3 linhas</div>
    <div class="tile pink">Elemento 2 <br> com 2 linhas</div>
    <div class="tile purple">Elemento 3 <br> com <br>4 linhas <br> de conteúdo</div>
  </div>
  <div class="coluna">
    <div class="tile blue">Elemento 4 <br> com 2 linhas</div>
    <div class="tile green">Elemento 5 <br> com <br> 5 linhas <br> de conteúdo <br> aleatório</div>
  </div>
</section>

CSS

.container{
  display: flex;
  flex-flow: row wrap;
  height: 100vw;
}

.coluna{
  display: flex;
  flex-flow: column wrap;
  flex: 1 1 auto;
  margin-right: 5px;
}

.coluna:last-child{margin-right: 0px;}

.red   {background-color: #e53935;}
.pink  {background-color: #d81b60;}
.purple{background-color: #8e24aa;}
.blue  {background-color: #1565c0;}
.green {background-color: #388e3c;}

.tile{
  box-sizing: border-box;
  color: #fff;
  margin-bottom: 5px;
  padding: 8px;
  border-radius: 5px;
  text-align: center;
}