COMPONENTS
React Grid Layout
React Grid Layout is a container component that allows users to rearrange and resize content panels. React Grid Layout is responsive and can be used on a wide array of device types.
- Panel
- Resize Dragger
Panels within the component have two core variations — resizable and not resizable. The interior of the panel is flexible and can accept any type of content. Read more on panel resizing below.
React grid has two densities — standard and compact. Compact mode reduces the gutter size between panels so that more information may be shown.
Within a layout, any panel may be moved to any other location, except for those that have been configured to be in a fixed position. To move a panel, position the mouse over a panel, click it, and then drag to the location you desire. A guide will appear in the layout showing where the panel will go when you release the click. Upon move, all the surrounding panels will reposition themselves to accomodate the new panel location. Note that the panel maintains its height and width when moved.
Panels may be resized to be any height or width within the react grid layout component. Grab the icon in the bottom right corner of the panel and drag the corner to change the height or width of the component. As with panel moving above, the other panels will rearrange to accomodate the new size of the panel.
Panels can be configured to be completely resizable, or to have a fixed height or fixed width or both. Note that when a panel is resized, its height and width will be constrained by any nearby panels that are immovable or of a fixed height or width.
React Grid Layout has responsive breakpoints built in so that even complex pages can be rendered and used on smartphones and other devices. When a screen is adjusted to be a smaller size, the panels will reorder themselves automatically to fit the new orientation.
- Although the React Grid Layout is intended to be highly flexible and accomodate a large number of content panels, sizing and numbers of panels within each row should be evaluated based on the legibility of each panel.
- Be sure to add titles, labels and descriptions to content where needed.
Contents