Dashboard

by Marcos Moitas

HTML

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="dashboard">
  <div class="tile">
    <h1>01</h1>
    <p>
      Artisan gentrify fixie food truck, portland brunch shaman edison bulb truffaut dreamcatcher pickled kickstarter ramps pour-over. Bespoke hella iPhone health goth tattooed tumeric, franzen tousled keytar fashion axe yes plz heirloom art party. Flexitarian fam vegan yes plz meditation, gluten-free fit skateboard craft beer. Direct trade sustainable dreamcatcher, migas cornhole cred photo booth vape ennui grailed. Kale chips hell of activated charcoal iPhone big mood selvage disrupt quinoa twee VHS solarpunk chillwave DSA fit +1. Kale chips kitsch retro, vibecession waistcoat put a bird on it ascot leggings yes plz cardigan freegan fanny pack.
    </p>
  </div>
  <div class="tile">
    <h1>02</h1>
    <p>
      Pour-over. Bespoke hella iPhone health goth tattooed tumeric, franzen tousled keytar fashion axe yes plz heirloom art party. Flexitarian fam vegan yes plz meditation, gluten-free fit skateboard craft beer. Direct trade sustainable dreamcatcher, migas cornhole cred photo booth vape ennui grailed. Kale chips hell of activated charcoal iPhone big mood selvage disrupt quinoa twee VHS solarpunk chillwave DSA fit +1. Kale chips kitsch retro, vibecession waistcoat put a bird on it ascot leggings yes plz cardigan freegan fanny pack.
    </p>
  </div>
  <div class="tile">
    <h1>03</h1>
    <p>
      Artisan gentrify fixie food truck, portland brunch shaman edison bulb truffaut dreamcatcher pickled kickstarter ramps pour-over. Bespoke hella iPhone health goth tattooed tumeric, franzen tousled keytar fashion axe yes plz heirloom art party. Flexitarian fam vegan yes plz meditation, gluten-free fit skateboard craft beer. Direct trade sustainable dreamcatcher, migas cornhole cred photo booth vape ennui grailed. Kale chips hell of activated charcoal iPhone big mood selvage disrupt quinoa twee VHS...

CSS

.dashboard {
  position: relative;
}
.tile {
  break-inside: avoid;
  margin-bottom: 1rem;
  
  padding: 16px;
  border-radius: 8px;
  border: solid 1px #000;
}

JavaScript

const grid = document.querySelector('.dashboard');
  new Masonry(grid, {
    itemSelector: '.tile',
    columnWidth: '.tile',
    percentPosition: true,
    gutter: 16
  });