grid-overflow
Version:
A pure CSS solution for gallery masonry layout and grid layout. It has optional 3D hover effect, utility classes. Adjustable by CSS variables.
239 lines (215 loc) • 9.7 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Grid Overflow - CSS library for responsive masonry and grid layout</title>
<!-- ~~~~ Grid Overflow CSS library, it creates responsive grid layout for thumbnails ~~~~ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/grid-overflow@1/src/GridOverflow3D.min.css" />
<!-- Story Show Gallery on click opens images into full screen lightbox -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/story-show-gallery@3/dist/ssg.min.css" />
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- helper styles and scripts - needed only for this showcase -->
<script src="./index.js"></script>
<link rel="stylesheet" href="index.css" />
<base href="https://roman-flossler.github.io/StoryShowGallery/photos/" target="_blank" />
<style>
/* configuration of the Grid Overflow */
.gridOverflow {
--gridGap: 1px;
--itemMinWidth: 190px;
--itemAspectRatio: 1;
--itemRounding: 6px;
--linkActionIcon: "⫸";
}
.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;
}
}*/
@container fenceBox (max-width: 600px) {
.gridOverflow.go-masonry {
--itemMinWidth: 40%;
--masonryItemHeight: 166px;
}
}
@container fenceBox (max-width: 450px) {
.gridOverflow.go-masonry {
--gridGap: 3px;
--itemRounding: 3px;
--itemMinWidth: 40%;
--masonryItemHeight: 148px;
}
}
</style>
</head>
<body style="color: #ffffffe0; background: #d4ddd1">
<div class="twoColLayout">
<section class="mainSection">
<main
id="fenceBox"
class="expand delay"
style="container: fenceBox / inline-size; max-width: min(500px, 100vw)"
>
<!-- parent grid element - gridOverflow class creates responsive square grid from grid's direct children (items) -->
<!-- go-3Dfx class adds to each grid item 3D animated effect on mouse over -->
<!-- go-actionIcon class adds to top right corner of grid items some symbol, but only if grid item is <a> tag -->
<!-- go-masonry class switch the layout into masonry mode -->
<div class="gridOverflow go-masonry go-3Dfx go-actionIcon ssg fs" id="grid">
<!-- grid item (grid's direct child) should have go_gridItem class. -->
<a href="sorvagsvatn-lake.jpg" class="go_gridItem go_gridItem-vertigo">
<img
src="sorvagsvatn-lake.jpg"
alt="Sørvágsvatn lake is placed on the edge of Traelanípa cliff. Incredible view."
/>
<span class="go_caption">.vertigo class</span>
</a>
<a href="faroe-islands-map.jpg" class="go_gridItem">
<img
src="faroe-islands-map.jpg"
alt="According to National Geographic the Faroe Islands are the world's most attractive archipelago."
/>
</a>
<a href="klaksvik-sheeps.jpg" class="go_gridItem go_gridItem-panorama">
<img src="klaksvik-sheeps.jpg" alt="There are more sheeps than people and nature is pristine." />
<span class="go_caption">.panorama class</span>
</a>
<a href="puffins.jpg" class="go_gridItem go_gridItem-VIP">
<img src="puffins.jpg" alt="Colonies of Puffins are nesting on Mykines island." />
<span class="go_caption go_caption-full"
>.VIP class <br />
Colonies of Puffins are nesting on Mykines island.</span
>
</a>
<a href="mykines-lighthouse.jpg" class="go_gridItem">
<img src="mykines-lighthouse.jpg" alt="Mykines island - it feels like at the end of the world." />
</a>
<a href="mulafossur-panorama.jpg" class="go_gridItem"><img src="mulafossur-panorama.jpg" /></a>
<a href="Seljalandsfoss.jpg" class="go_gridItem">
<img src="Seljalandsfoss.jpg" />
</a>
<a
href="https://github.com/Roman-Flossler/Grid-Overflow"
class="go_gridItem go_gridItem-panorama go_gridItem-centered"
>
<div class="heading" style="background: #2f363f">
<div>
<h2 style="transform: none"># Grid Overflow</h2>
<br />
<p>
<span style="font-size: 108%; color: white">+ Story Show Gallery lightbox</span> <br />
<i style="opacity: 0.64">after a click on a thumbnail</i>
</p>
</div>
</div>
<span class="go_caption">.panorama class</span>
</a>
<div href="#" class="go_gridItem go_gridItem-centered" style="background: #750015">
<p class="info">
<span
>Grid Overflow is a CSS library for respon­sive gallery thumbnails layout. It has optional 3D
hover effect, utility classes. Adjust­able by CSS variables.
</span>
</p>
</div>
<div href="#" class="go_gridItem go_gridItem-centered" style="background: #750015">
<p class="info">
<span
>Grid Overflow offers masonry layout and grid layout, where grid items can be given vertigo,
pa­no­rama or VIP class to over­flow into the next cell.
</span>
</p>
</div>
</div>
</main>
</section>
<aside>
<h1>Grid Overflow</h1>
<!-- buttons for playing with the gallery features -->
<section class="butts">
<button onclick="toggleThumbnailsLayout()"><span>᎒᎒᎒</span> masonry / grid</button>
___
<button onclick="showResponsivity()"><span>↹</span> show responsivity</button>
___
<button class="efx" onclick="toggleHoverEffect(this)">✴ tilt / zoom :hover</button>
<span style="width: 4.4%"></span>
<div style="display: flex">
<button onClick="toggleGalleryTheme(this)">◑ theme: LIGHT</button>
___
<button id="ssgrun" onClick="runStoryShowGallery()">▶ SSG.run()</button>
</div>
</section>
<br />
<p>
Grid overflow, as a pure CSS library, is configurable by CSS classes and variables.The code below shows
configuration of the left (top) gallery:
</p>
<div id="codeGrid">
<h2>⇐ CSS classes:</h2>
<pre class="wrap">
gridOverflow go-3Dfx go-actionIcon <ins class="hidden">go-zoomFx</ins>
</pre>
<h2>⇐ CSS variables:</h2>
<pre>
<span>.gridOverflow</span> {
--gridGap: <span>1px</span>;
--itemMinWidth: <span>190px</span>;
--itemRounding: <span>6px</span>;
--linkActionIcon: <span>"⫸"</span>;
--itemAspectRatio: <span>1</span>;
}
</pre
>
</div>
<div id="codeMasonry" class="codeMasonry">
<h2>⇐ CSS classes:</h2>
<pre class="wrap">
gridOverflow go-3Dfx go-actionIcon go-masonry <ins class="hidden">go-zoomFx</ins>
</pre>
<h2>⇐ CSS variables:</h2>
<pre>
<span>.gridOverflow.go-masonry</span> {
--gridGap: <span>8px;</span>
--itemMinWidth: <span>30%;</span>
--itemRounding: <span>25% 88% 10% 88% / 18% 9px 15% 9px;</span>
--linkActionIcon: <span>"»";</span>
--masonryItemHeight: <span>200px;</span>
}
<span>@media</span> (max-width: <span>600px</span>) {
<span>.gridOverflow.go-masonry</span> {
--itemMinWidth: <span>40%;</span>
--masonryItemHeight: <span>166px;</span>
}
}
</pre>
</div>
<p>
<a href="https://github.com/Roman-Flossler/Grid-Overflow" target="_blank">Documentation</a>
<a href="https://codepen.io/Roman-Flossler/pen/jOjzxQy" target="_blank">Try it live at CodePen</a>
<a href="https://codesandbox.io/p/sandbox/cool-albattani-c7gm6s" target="_blank">React example at Sandbox</a>
</p>
</aside>
</div>
<!-- Story Show Gallery script and configuration -->
<script src="https://cdn.jsdelivr.net/npm/story-show-gallery@3/dist/ssg.min.js"></script>
<script>
SSG.cfg.globalAuthorCaption =
"<a href='https://roman-flossler.github.io/StoryShowGallery' target='_blank'>Story Show Gallery</a>";
SSG.cfg.watermarkText = "🐑 Faroe Islands .io";
SSG.cfg.watermarkFontSize = 18;
SSG.cfg.watermarkOffsetX = 3;
SSG.cfg.watermarkOffsetY = 1.5;
SSG.cfg.watermarkOpacity = 0.66;
SSG.cfg.theme = "light";
</script>
</body>
</html>