<eg-grid>

Web component wrapper. Drag to rearrange, resize from edges.

A (2×1)
B
C
D (1×2)
E (2×1)
F
G
H (2×1)

Drag items to rearrange. Resize from corners/edges. Arrow keys to navigate.

Server-rendered

CSS positions items before JS loads — no flash of unstyled content. Persist layout changes via egg-drag-end events.

<script type="module" src="eg-grid-element.js"></script>

<style>
  eg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  [data-egg-item="a"] { grid-column: 1 / span 2; grid-row: 1; }
  [data-egg-item="b"] { grid-column: 3; grid-row: 1; }
</style>

<eg-grid algorithm="push" resize-handles="all">
  <div data-egg-item="a">A</div>
  <div data-egg-item="b">B</div>
</eg-grid>

Client-side

Attributes configure the grid. Items auto-flow — no CSS needed. Simpler setup for SPAs where JS is always available.

<script type="module" src="eg-grid-element.js"></script>

<eg-grid columns="4" gap="8"
         algorithm="push" resize-handles="all">
  <div data-egg-item="a">A</div>
  <div data-egg-item="b">B</div>
</eg-grid>

Responsive

Optional for both approaches. Add cell-size to auto-generate container query breakpoints that reflow items as the grid resizes. Without it, column count stays fixed. 

<eg-grid columns="4" cell-size="120" gap="8" ...>