# Grid Overflow
+ Story Show Gallery lightbox
after a click on a thumbnail
Grid Overflow is responsive CSS grid layout with optional animated effects, utility classes and adjustable by CSS variables.
Grid overflow is a pure CSS solution for masonry layout and grid layout, where grid items can overflow into the next cell.
Code of this gallery: Codesandbox.io - Grid Overflow
➜ CSS classes: gridOverflow go-3Dfx go-actionIcon CSS variables: .gridOverflow { --gridGap: 1px; --itemMinWidth: 210px; --itemRounding: 6px; --linkActionIcon: "⤢"; --itemAspectRatio: 1; }
➜ CSS classes: gridOverflow go-masonry go-zoomFx go-actionIcon CSS variables: .gridOverflow.go-masonry { --gridGap: 10px; --itemMinWidth: 30%; --itemRounding: 25% 88% 10% 88% / 18% 9px 15% 9px; --linkActionIcon: "»"; --masonryItemHeight: 200px; } @media (max-width: 600px) { .gridOverflow.go-masonry { --itemMinWidth: 45%; --masonryItemHeight: 39vw; } }
Masonry Mode:
# Grid Overflow
+ Story Show Gallery lightbox
after a click on a thumbnail
Grid Overflow is responsive CSS grid layout with optional animated effects, utility classes and adjustable by CSS variables.
Grid overflow is a pure CSS solution for masonry layout and grid layout, where grid items can overflow into the next cell.
Code of this gallery: Codesandbox.io - Grid Overflow Masonry