.vertigo class
.panorama class
.VIP classColonies of Puffins are nesting on Mykines island.
# 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:
Aurora behind the Seljalandsfoss waterfall.
# 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