Styling

snapgrid ships no CSS. Components return inline positioning styles plus stable class names and data attributes; you bring the look.

Class names (<GridLayout>)

The drop-in components apply these so you have predictable hooks to target:

.snapgrid-item {
  border-radius: 10px;
  background: var(--card);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
}
.snapgrid-item[data-dragging] {
  opacity: 0.9;
}
.snapgrid-placeholder {
  background: rgb(99 102 241 / 0.15);
  border: 1px dashed rgb(99 102 241 / 0.6);
  border-radius: 8px;
}

Positioning styles are inline

Each item’s left / top / width / height is computed and set inline. Don’t override these. The component also applies a transition so non-active tiles animate as they reflow; you can override the transition in your style prop or class if you want a different feel.

<GridItem id="a" style={{ transition: "all 120ms ease" }}>
  …
</GridItem>

Data attributes

• data-grid-id: the item’s i, handy for selectors and tests.
• data-dragging: present on the active tile while dragging.
• data-drop-target: present on the container while a compatible draggable is over it.

Custom placeholder & overlay

Want a different placeholder or drag preview? Use the headless hooks and render your own element with the returned style:

const placeholder = useGridPlaceholder();
{placeholder && <div className="my-ghost" style={placeholder.style} />}