# Grid Overflow

+ Story Show Gallery lightbox
after a click on a thumbnail

.panorama class

Grid Overflow is a CSS library for responsive gallery thumbnails layout. It has optional 3D hover effect, utility classes. Adjustable by CSS variables.

Grid Overflow offers masonry layout and grid layout, where grid items can be given vertigo, panorama or VIP class to overflow into the next cell.

Grid Overflow

___ ___

___

Grid overflow, as a pure CSS library, is configurable by CSS classes and variables.The code below shows configuration of the left (top) gallery:

⇐ CSS classes:

    gridOverflow go-3Dfx go-actionIcon go-zoomFx

⇐ CSS variables:

    .gridOverflow {
      --gridGap: 1px;
      --itemMinWidth: 190px;
      --itemRounding: 6px;
      --linkActionIcon: "⫸";
      --itemAspectRatio: 1;
    }

⇐ CSS classes:

    gridOverflow go-3Dfx go-actionIcon go-masonry go-zoomFx

⇐ CSS variables:

    .gridOverflow.go-masonry  {
      --gridGap: 8px;
      --itemMinWidth: 30%;
      --itemRounding: 25% 88% 10% 88% / 18% 9px 15% 9px;
      --linkActionIcon: "»";
      --masonryItemHeight: 200px;
    }

    @media (max-width: 600px) {
    .gridOverflow.go-masonry {
        --itemMinWidth: 40%;
        --masonryItemHeight: 166px;
      }
    }

Documentation Try it live at CodePen React example at Sandbox