Aspect ratio constraints
Lock item resizing to a fixed aspect ratio so cards keep their proportions while you drag the resize handles in this dnd-grid React layout example.
How it works
Constraints run on every resize and can rewrite the proposed geometry before it is committed. This example derives the pixel width of one column from useContainerWidth, then forces each item's height to track its width so cards keep a fixed aspect ratio no matter which handle is dragged.
Because the ratio is computed from the live container width, gap, and containerPadding, it stays correct when the grid is resized rather than only at first paint. Reach for this when the content inside a cell has an intrinsic shape — video embeds, image tiles, or map panes.
Related examples
- Constraints — Plug in custom constraints and rules to control where items can move and how far they can resize in this constraint-driven dnd-grid React layout example.
- Resizable handles — Resize grid items from all eight edges and corners using the built-in resize handles in this resizable-handles dnd-grid React layout example.
- Responsive layout — Define breakpoint-specific layouts that adapt to the container width so the grid reflows responsively across screen sizes in this dnd-grid React example.
- Scale — Keep drag and resize maths correct when the grid is visually scaled with CSS transforms in this scale-aware dnd-grid React grid layout example.