Gallery Sections
Gallery sections — a uniform grid with a dialog lightbox and a CSS-columns masonry.
Image gallery sections for a portfolio, agency or venue site. Each is a self-contained, full-width
Svelte <section> built only from semantic tokens, so it restyles across every theme. Try the
theme switcher above the preview.
Preview
Gallery
A look at the work, the space and the people behind it.
In pictures
Moments from the studio, the road and everything in between.
Install
bun x bosia@latest add block gallery/grid
bun x bosia@latest add block gallery/masonrygrid pulls ui/dialog for its lightbox.
The blocks
grid— uniform square thumbnails; clicking one opens the full photo in a dialog lightbox.masonry— mixed-height photos flowed into CSS columns — no JavaScript, no library.
Usage
<script lang="ts">
import Gallery from "$lib/blocks/gallery/grid/block.svelte";
</script>
<Gallery />Both blocks ship with sample photos so they render standalone. To use your own, pass images —
an array of { src, alt } (grid also accepts an optional caption shown in the lightbox) —
plus heading and intro for the copy. Pair with the
file-upload feature if the images come from your own storage.
Source
src/lib/blocks/gallery/*/block.svelte