Rhombus Grid

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…

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.

Diamond grid with mobile fallback