Masonry Gallery
A CSS-columns masonry image gallery. No JavaScript.
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#18181b, #fafafa);
--color-accent: light-dark(#4f46e5, #818cf8);
--color-bg: light-dark(#ffffff, #0b0b0d);
--color-surface: light-dark(#f7f7f8, #161619);
--color-text: light-dark(#0a0a0c, #f5f5f6);
--color-text-muted: light-dark(#52525b, #a1a1aa);
--color-border: light-dark(#e4e4e7, #26262b);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.625rem;
--shadow: 0 1px 2px rgb(10 10 12 / 0.05), 0 4px 12px rgb(10 10 12 / 0.06), 0 16px 40px rgb(10 10 12 / 0.06);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#4f46e5, #818cf8);
--color-accent: light-dark(#a855f7, #c084fc);
--color-bg: light-dark(#ffffff, #0c0c18);
--color-surface: light-dark(#f5f5ff, #16162b);
--color-text: light-dark(#111127, #ececf6);
--color-text-muted: light-dark(#5a5a72, #9d9dbd);
--color-border: light-dark(#e4e4f2, #28284a);
--font-heading: 'Inter', system-ui, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.1;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 0.75rem;
--shadow: 0 1px 2px rgb(79 70 229 / 0.06), 0 6px 16px rgb(79 70 229 / 0.10), 0 20px 48px rgb(79 70 229 / 0.10);
--container-width: 1120px;
}
Theme tokens add once per site, shared by every block
:root {
color-scheme: light dark;
--color-primary: light-dark(#0d9488, #2dd4bf);
--color-accent: light-dark(#f97316, #fb923c);
--color-bg: light-dark(#fbfaf8, #171412);
--color-surface: light-dark(#f3f0ea, #221e1a);
--color-text: light-dark(#292524, #ece7e0);
--color-text-muted: light-dark(#6b6560, #a8a099);
--color-border: light-dark(#e5dfd6, #37312a);
--font-heading: Georgia, 'Times New Roman', serif;
--font-body: 'Inter', system-ui, sans-serif;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.375rem;
--text-2xl: 1.75rem;
--text-3xl: 2.375rem;
--text-4xl: 3.5rem;
--weight-normal: 400;
--weight-medium: 500;
--weight-bold: 700;
--leading-tight: 1.15;
--leading-normal: 1.6;
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 2rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 8rem;
--radius: 1rem;
--shadow: 0 2px 6px rgb(90 75 60 / 0.06), 0 10px 28px rgb(90 75 60 / 0.10);
--container-width: 1120px;
}
HTML
<section class="s-gallery-masonry-columns">
<div class="gm-inner">
<div class="gm-head">
<span class="gm-eyebrow">Gallery</span>
<h2>Selected work</h2>
<p>A masonry gallery built with CSS columns.</p>
</div>
<div class="gm-grid">
<figure class="gm-item"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22800%22%20viewBox%3D%220%200%20600%20800%22%20role%3D%22img%22%20aria-label%3D%2201%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2f3f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfe2ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22p%22%20width%3D%2260%22%20height%3D%2260%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M%2060%200%20L%200%200%200%2060%22%20fill%3D%22none%22%20stroke%3D%22%23c9cdd8%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22800%22%20fill%3D%22url(%23g)%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22800%22%20fill%3D%22url(%23p)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22377.2%22%20r%3D%2260.800000000000004%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M267.7%20392.4%20l22.8%20-28.5%20l17.1%2019%20l11.4%20-13.299999999999999%20l13.299999999999999%2022.8%20z%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ccircle%20cx%3D%22320.9%22%20cy%3D%22348.7%22%20r%3D%229.12%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%22472.2%22%20fill%3D%22%238a90a0%22%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2238%22%20font-weight%3D%22600%22%20letter-spacing%3D%220.08em%22%20text-anchor%3D%22middle%22%3E01%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="800" /></figure>
<figure class="gm-item"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22420%22%20viewBox%3D%220%200%20600%20420%22%20role%3D%22img%22%20aria-label%3D%2202%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2f3f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfe2ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22p%22%20width%3D%2242%22%20height%3D%2242%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M%2042%200%20L%200%200%200%2042%22%20fill%3D%22none%22%20stroke%3D%22%23c9cdd8%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22420%22%20fill%3D%22url(%23g)%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22420%22%20fill%3D%22url(%23p)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22194.4%22%20r%3D%2241.6%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M277.9%20204.8%20l15.6%20-19.5%20l11.700000000000001%2013%20l7.8%20-9.1%20l9.1%2015.6%20z%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ccircle%20cx%3D%22314.3%22%20cy%3D%22174.9%22%20r%3D%226.24%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%22259.4%22%20fill%3D%22%238a90a0%22%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2226%22%20font-weight%3D%22600%22%20letter-spacing%3D%220.08em%22%20text-anchor%3D%22middle%22%3E02%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="420" /></figure>
<figure class="gm-item"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22560%22%20viewBox%3D%220%200%20600%20560%22%20role%3D%22img%22%20aria-label%3D%2203%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2f3f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfe2ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22p%22%20width%3D%2256%22%20height%3D%2256%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M%2056%200%20L%200%200%200%2056%22%20fill%3D%22none%22%20stroke%3D%22%23c9cdd8%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22560%22%20fill%3D%22url(%23g)%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22560%22%20fill%3D%22url(%23p)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22259%22%20r%3D%2256%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M270.25%20273%20l21%20-26.25%20l15.75%2017.5%20l10.5%20-12.25%20l12.25%2021%20z%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ccircle%20cx%3D%22319.25%22%20cy%3D%22232.75%22%20r%3D%228.4%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%22346.5%22%20fill%3D%22%238a90a0%22%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2235%22%20font-weight%3D%22600%22%20letter-spacing%3D%220.08em%22%20text-anchor%3D%22middle%22%3E03%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="560" /></figure>
<figure class="gm-item"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22680%22%20viewBox%3D%220%200%20600%20680%22%20role%3D%22img%22%20aria-label%3D%2204%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2f3f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfe2ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22p%22%20width%3D%2260%22%20height%3D%2260%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M%2060%200%20L%200%200%200%2060%22%20fill%3D%22none%22%20stroke%3D%22%23c9cdd8%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22680%22%20fill%3D%22url(%23g)%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22680%22%20fill%3D%22url(%23p)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22317.2%22%20r%3D%2260.800000000000004%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M267.7%20332.4%20l22.8%20-28.5%20l17.1%2019%20l11.4%20-13.299999999999999%20l13.299999999999999%2022.8%20z%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ccircle%20cx%3D%22320.9%22%20cy%3D%22288.7%22%20r%3D%229.12%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%22412.2%22%20fill%3D%22%238a90a0%22%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2238%22%20font-weight%3D%22600%22%20letter-spacing%3D%220.08em%22%20text-anchor%3D%22middle%22%3E04%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="680" /></figure>
<figure class="gm-item"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22400%22%20viewBox%3D%220%200%20600%20400%22%20role%3D%22img%22%20aria-label%3D%2205%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2f3f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfe2ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22p%22%20width%3D%2240%22%20height%3D%2240%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M%2040%200%20L%200%200%200%2040%22%20fill%3D%22none%22%20stroke%3D%22%23c9cdd8%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22400%22%20fill%3D%22url(%23p)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22185%22%20r%3D%2240%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M278.75%20195%20l15%20-18.75%20l11.25%2012.5%20l7.5%20-8.75%20l8.75%2015%20z%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ccircle%20cx%3D%22313.75%22%20cy%3D%22166.25%22%20r%3D%226%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%22247.5%22%20fill%3D%22%238a90a0%22%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2225%22%20font-weight%3D%22600%22%20letter-spacing%3D%220.08em%22%20text-anchor%3D%22middle%22%3E05%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="400" /></figure>
<figure class="gm-item"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22620%22%20viewBox%3D%220%200%20600%20620%22%20role%3D%22img%22%20aria-label%3D%2206%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2f3f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfe2ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22p%22%20width%3D%2260%22%20height%3D%2260%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M%2060%200%20L%200%200%200%2060%22%20fill%3D%22none%22%20stroke%3D%22%23c9cdd8%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22620%22%20fill%3D%22url(%23g)%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22620%22%20fill%3D%22url(%23p)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22287.2%22%20r%3D%2260.800000000000004%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M267.7%20302.4%20l22.8%20-28.5%20l17.1%2019%20l11.4%20-13.299999999999999%20l13.299999999999999%2022.8%20z%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ccircle%20cx%3D%22320.9%22%20cy%3D%22258.7%22%20r%3D%229.12%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%22382.2%22%20fill%3D%22%238a90a0%22%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2238%22%20font-weight%3D%22600%22%20letter-spacing%3D%220.08em%22%20text-anchor%3D%22middle%22%3E06%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="620" /></figure>
<figure class="gm-item"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22480%22%20viewBox%3D%220%200%20600%20480%22%20role%3D%22img%22%20aria-label%3D%2207%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2f3f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfe2ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22p%22%20width%3D%2248%22%20height%3D%2248%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M%2048%200%20L%200%200%200%2048%22%20fill%3D%22none%22%20stroke%3D%22%23c9cdd8%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22480%22%20fill%3D%22url(%23g)%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22480%22%20fill%3D%22url(%23p)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22222%22%20r%3D%2248%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M274.5%20234%20l18%20-22.5%20l13.5%2015%20l9%20-10.5%20l10.5%2018%20z%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ccircle%20cx%3D%22316.5%22%20cy%3D%22199.5%22%20r%3D%227.199999999999999%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%22297%22%20fill%3D%22%238a90a0%22%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2230%22%20font-weight%3D%22600%22%20letter-spacing%3D%220.08em%22%20text-anchor%3D%22middle%22%3E07%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="480" /></figure>
<figure class="gm-item"><img src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22720%22%20viewBox%3D%220%200%20600%20720%22%20role%3D%22img%22%20aria-label%3D%2208%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f2f3f7%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23dfe2ea%22%2F%3E%3C%2FlinearGradient%3E%3Cpattern%20id%3D%22p%22%20width%3D%2260%22%20height%3D%2260%22%20patternUnits%3D%22userSpaceOnUse%22%3E%3Cpath%20d%3D%22M%2060%200%20L%200%200%200%2060%22%20fill%3D%22none%22%20stroke%3D%22%23c9cdd8%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Crect%20width%3D%22600%22%20height%3D%22720%22%20fill%3D%22url(%23g)%22%2F%3E%3Crect%20width%3D%22600%22%20height%3D%22720%22%20fill%3D%22url(%23p)%22%2F%3E%3Ccircle%20cx%3D%22300%22%20cy%3D%22337.2%22%20r%3D%2260.800000000000004%22%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.6%22%2F%3E%3Cpath%20d%3D%22M267.7%20352.4%20l22.8%20-28.5%20l17.1%2019%20l11.4%20-13.299999999999999%20l13.299999999999999%2022.8%20z%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ccircle%20cx%3D%22320.9%22%20cy%3D%22308.7%22%20r%3D%229.12%22%20fill%3D%22%23a2a8b8%22%2F%3E%3Ctext%20x%3D%2250%25%22%20y%3D%22432.2%22%20fill%3D%22%238a90a0%22%20font-family%3D%22system-ui%2C%20sans-serif%22%20font-size%3D%2238%22%20font-weight%3D%22600%22%20letter-spacing%3D%220.08em%22%20text-anchor%3D%22middle%22%3E08%3C%2Ftext%3E%3C%2Fsvg%3E" alt="" width="600" height="720" /></figure>
</div>
</div>
</section>CSS block only, works with any theme's tokens
.s-gallery-masonry-columns {
background:
radial-gradient(40rem 20rem at 85% -10%, color-mix(in srgb, var(--color-primary) 5%, transparent), transparent 60%),
var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
padding-block: var(--space-2xl);
}
.s-gallery-masonry-columns .gm-inner {
max-width: var(--container-width);
margin-inline: auto;
padding-inline: var(--space-lg);
}
.s-gallery-masonry-columns .gm-head {
margin-bottom: var(--space-xl);
}
.s-gallery-masonry-columns .gm-eyebrow {
display: inline-block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--space-sm);
}
.s-gallery-masonry-columns .gm-head h2 {
font-family: var(--font-heading);
text-wrap: balance;
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: -0.02em;
margin: 0 0 var(--space-sm);
}
.s-gallery-masonry-columns .gm-head p {
font-size: var(--text-lg);
color: var(--color-text-muted);
margin: 0;
}
.s-gallery-masonry-columns .gm-grid {
column-count: 4;
column-gap: var(--space-md);
}
.s-gallery-masonry-columns .gm-item {
margin: 0 0 var(--space-md);
break-inside: avoid;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--color-border);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.s-gallery-masonry-columns .gm-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow);
}
.s-gallery-masonry-columns .gm-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.3s ease;
}
.s-gallery-masonry-columns .gm-item:hover img {
transform: scale(1.03);
}
@media (max-width: 900px) {
.s-gallery-masonry-columns .gm-grid {
column-count: 3;
}
}
@media (max-width: 640px) {
.s-gallery-masonry-columns .gm-grid {
column-count: 2;
}
}
@media (max-width: 400px) {
.s-gallery-masonry-columns .gm-grid {
column-count: 1;
}
}
Modern CSS in this block
Baseline 2023 — works in every up-to-date browser.
- color-mix()Newly availableMixing colors without a preprocessor
- text-wrap: balanceNewly availableBalanced headlines without manual line breaks
Plus universally supported features: logical properties, custom properties. Baseline status is pulled from each feature's reference snippet.