Project
Limitations and roadmap
What is not built yet, what the examples do meanwhile, and the order the next steps will come in.
The layout rules, the model, the engine, the React primitives, the keyboard, right-to-left, drops from outside the grid, responsive grids, touch, constraints, the wrap and fast compactors, scaled containers and the grid background are in. Much of a full grid layout is still to come.
The gaps
| missing | what the examples do meanwhile |
|---|---|
| No dragging an item between two grids. | Drag it out of one (onDragStop with outside) and bring it into the other from a drag source (toolbox). |
| No native drag out of the grid into another app. | Export the item another way (a button, the clipboard). |
| On touch, a drag source takes the press at once: a sidebar of sources does not scroll from them. | Leave room to scroll between the sources (the widget-sheet scrolls from its edges). |
| No hiding an item on one breakpoint only: every breakpoint shows the same items. | Remove it on that breakpoint, and add it back when another is active. |
| No viewport breakpoints: the grid's own width decides. | Pass breakpoint (controlled) from your own media query. |
| No pinch-zoom of the grid. | Let the page zoom. |
| Touch is checked in Chromium's real touch input and in WebKit on an iPhone's viewport (synthetic touch), not on a real iPhone. | Check your app on a device; the guide lists what iOS needs from your CSS. |
| Native drags from the operating system are checked with synthetic events in the end-to-end tests (Chromium and Firefox), not with real files. React Grid Layout's Firefox workaround (a class name on the dragged-over element) is not used: the grid counts the drag's enter and leave events and reads where a leave goes. | Report a browser where a file drag over items behaves differently. |
The columns are a hard rule: boundedY (or no constraints) never lets an item past the last column, as React Grid Layout's does. | Add columns, or use allowOverlap with a wider grid. |
aspectRatio holds the ratio as closely as whole rows allow (within half a row). | Use small rows (a rowHeight of a few pixels and a row gap of 0) for a ratio within a pixel. |
A plain model.run has no pixels: aspectRatio is skipped and containerBounds falls back to maxRows (the result's skipped names them). | Pass the engine's pixels: { env: { geometry: engine.get("geometry") } }. |
| No rotated or skewed parent: only a scale is read off the grid's box. | Keep rotations outside the grid's ancestors, or pass scale when the box cannot tell it. |
With allowOverlap, no bring to front: the layout's order is the drawing order. | Reorder the layout. |
The roadmap
- Parity and gallery: model API recipes, real-world apps and an audit against React Grid Layout.
- Between grids: an item dragged from one grid into another.
- Per-breakpoint visibility: an item shown on some breakpoints only.