A powerful grid layout component for building responsive grid layouts. It abstracts standard CSS Grid properties and includes container-query based responsiveness.
Experiment with all grid properties. Drag the handle on the right to test responsiveness.
Compare different column counts from 2 to 4 columns.
Auto-fit collapses empty tracks while auto-fill maintains them. Drag to resize and see the difference.
Visual comparison of different gap sizes from xs to xl.
Control item alignment with justify-items and align-items properties.
Use auto-flow with dense packing to fill gaps in the grid layout.
The 'containerQueryResponsive' prop automatically adjusts columns based on the container width, not the screen size.
A practical example using auto-fit for a responsive image gallery.