masonry-snap-grid-layout
Version:
A performant, responsive masonry layout library with smooth animations, dynamic columns, and zero dependencies.
1 lines • 1.88 kB
Source Map (JSON)
{"version":3,"sources":["../../src/index.css"],"sourcesContent":["/* \n====================================================================\nMasonrySnapGridLayout - Base Styles\n====================================================================\nThese styles define the core visual and positional behavior of the \nmasonry grid container and its items. They are minimal to allow \nflexibility for custom themes while ensuring smooth layout animations.\n====================================================================\n*/\n\n/* \nContainer styles:\n- Acts as the positioning context for masonry items (position: relative).\n- Takes full available width.\n- Smoothly animates height changes when items reflow.\n- Hides overflow to prevent content from spilling outside the layout.\n*/\n.masonry-snap-grid-container {\n position: relative;\n width: 100%;\n transition: height 0.4s ease-out;\n overflow: hidden;\n}\n\n/* \nItem styles:\n- Absolutely positioned within the container.\n- Animates transform changes for smooth reordering.\n- Uses GPU-accelerated transform optimizations (`will-change`, `backface-visibility`).\n- Sets `box-sizing: border-box` for consistent sizing with padding/border.\n- `transform-origin` ensures scaling/rotation pivot from the top-left corner.\n- `perspective` enables subtle 3D rendering improvements on some browsers.\n*/\n.masonry-snap-grid-item {\n position: absolute;\n transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n will-change: transform;\n box-sizing: border-box;\n transform-origin: top left;\n backface-visibility: hidden;\n perspective: 1000px;\n}\n"],"mappings":";AAiBA,CAAC;AACG,YAAU;AACV,SAAO;AACP,cAAY,OAAO,KAAK;AACxB,YAAU;AACd;AAWA,CAAC;AACG,YAAU;AACV,cAAY,UAAU,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACrD,eAAa;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,uBAAqB;AACrB,eAAa;AACjB;","names":[]}