CMS Tag Grid

CMS Tag Grid lays a collection into an even grid of fixed-ratio cards and narrows it with tag chips: a chip press swaps a class and CSS does the rest, nothing measured and no…

CMS Tag Grid lays a collection into an even grid of fixed-ratio cards and narrows it with tag chips: a chip press swaps a class and CSS does the rest, nothing measured and no observer. Pick several tags at once and choose whether a card carries any of them or every one; each chip shows the count behind it and a polite line reads out the total on screen. Bind a CMS collection through the card slots, or use the built-in card face at 1:1, 4:5 or 16:9; columns follow the frame, and the Framer canvas shows the finished grid on its first frame. - **One even grid.** Every card face shares a ratio, so rows line up. - **Three ratios.** Square, 4:5 or 16:9, set once. - **Chips that stack.** Several tags stay on at once, matching any tag or every tag. - **One class swap.** A chip press swaps classes; the rest is CSS. - **Counts on the chips.** Each chip carries its count; a polite line reads the total. - **CMS slots.** One component slot per card binds a collection straight into the grid. - **Columns that follow the frame.** Auto, or two to four across; a phone holds two. - **Styled by you.** Gap, radius, five colours, text size, alignment, max width and every label. What you control • Items as an array: title, caption, tags as a comma list, image with alt text, link and a tint for the empty face • Card slots for the CMS path, paired one to one with the items • Card ratio, column count, gap, radius, match mode, initial tags, the All chip and its label, and alignment • Five colours, text size, max width, the count wording, the placeholder lines and the accessibility labels Limits: one grid per section, one ratio for every card face (a slotted card keeps its own height), images from your project or CMS, up to about eighty cards.

Square gallery filtered by chips