Layout — DivDrop Playground

Containers

dd-container

Container widths

dd-container-sm — 860px max

dd-container — 1240px max

<div class="dd-container">…</div>     <!-- 1240px -->
<div class="dd-container-sm">…</div>  <!-- 860px  -->
<div class="dd-container-lg">…</div>  <!-- 1440px -->
<div class="dd-shell">…</div>         <!-- alias   -->

Containers

Grid

dd-grid

Grid playground

1

2

3

4

5

6

Columns:

<div class="dd-grid dd-grid-3">
  <div>…</div>
  <div>…</div>
  <div>…</div>
</div>
<!-- Tablet 768px: dd-grid-3/4 → 2 cols -->
<!-- Mobile 480px: all → 1 col          -->

Grid

Stack · Cluster · Cluster-between

dd-stack · dd-cluster

Stack — vertical spacing

Stack item 1

Stack item 2

Stack item 3

<div class="dd-stack">…</div>         <!-- gap 1rem   -->
<div class="dd-stack dd-stack-sm">…</div>  <!-- gap .5rem  -->
<div class="dd-stack dd-stack-lg">…</div>  <!-- gap 1.5rem -->

Cluster — horizontal wrapping

Badge More

Left side

<div class="dd-cluster">
  <!-- Children wrap, gap .75rem, align center -->
  <button class="dd-button">One</button>
  <button class="dd-button">Two</button>
</div>

<div class="dd-cluster-between">
  <span>Left</span>
  <button class="dd-button">Right</button>
</div>

Stack & Cluster