Grid

dabblet.css

/**
 * Grid
 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  padding: 16px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, 240px);
  grid-gap: 16px;
}

@media only screen and (max-width: 1280px) {
  #container {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.item {
  height: 100px;
  border-radius: 8px;
}

dabblet.html

<div id="container">
  <div class="item" style="background: #F3B3A6"></div>
  <div class="item" style="background: #B98B82"></div>
  <div class="item" style="background: #E4959E"></div>
  <div class="item" style="background: #37515F"></div>
  <div class="item" style="background: #1F0812"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}