Rhombus Grid is a diamond-tiled grid layout for showcasing product categories, portfolio pieces, services, or any set of image-and-label items — with a clean fallback for narrow screens.
Items Add as many items as needed, each with its own Image, Label, Color (used as a background if no image is set, or while the image loads), and Link.
Layout
Columns — sets how many cells appear in each full row (2–8). Offset rows automatically have one fewer cell, creating the signature jagged diamond silhouette.
Gap — visual spacing between diamonds, from 0 (seamless tiling) up to clearly separated tiles.
Overlay & legibility
Overlay — None, Gradient, or Solid. Darkens the image so labels stay readable.
Overlay Color / Opacity — fine-tune the darkening effect.
Labels
Label Font / Label Color — full typography control.
Label — Always Visible, or Reveal on Hover for a clean image-first look where the label fades in only on interaction.
Border Toggle a stroke around each diamond, with independent Color and Width controls, for a "tile" look instead of seamless tiling.
Hover Effects None, Zoom (image scales slightly), Brighten, or Lift (the tile pops forward with a subtle scale and z-index boost).
Responsive fallback Below a configurable container-width breakpoint, the grid automatically switches from diamonds to a standard rounded-corner grid — set the fallback's column count and corner radius independently. Handled with CSS container queries for reliable behavior on canvas, Preview, and published sites.
Animation Items fade in with a staggered delay as the grid scrolls into view, with a configurable duration. Canvas-safe — shows immediately in the Framer editor without waiting for scroll.
Drop it into any section, add your items, and configure the look entirely from the panel.
Rhombus Grid is a diamond-tiled grid layout for showcasing product categories, portfolio pieces, services, or any set of image-and-label items — with a clean fallback for narrow screens.
Items Add as many items as needed, each with its own Image, Label, Color (used as a background if no image is set, or while the image loads), and Link.
Layout
Columns — sets how many cells appear in each full row (2–8). Offset rows automatically have one fewer cell, creating the signature jagged diamond silhouette.
Gap — visual spacing between diamonds, from 0 (seamless tiling) up to clearly separated tiles.
Overlay & legibility
Overlay — None, Gradient, or Solid. Darkens the image so labels stay readable.
Overlay Color / Opacity — fine-tune the darkening effect.
Labels
Label Font / Label Color — full typography control.
Label — Always Visible, or Reveal on Hover for a clean image-first look where the label fades in only on interaction.
Border Toggle a stroke around each diamond, with independent Color and Width controls, for a "tile" look instead of seamless tiling.
Hover Effects None, Zoom (image scales slightly), Brighten, or Lift (the tile pops forward with a subtle scale and z-index boost).
Responsive fallback Below a configurable container-width breakpoint, the grid automatically switches from diamonds to a standard rounded-corner grid — set the fallback's column count and corner radius independently. Handled with CSS container queries for reliable behavior on canvas, Preview, and published sites.
Animation Items fade in with a staggered delay as the grid scrolls into view, with a configurable duration. Canvas-safe — shows immediately in the Framer editor without waiting for scroll.
Drop it into any section, add your items, and configure the look entirely from the panel.
Anwaar Ansari
