Built 120+ CMS detail pages in Framer with all different layout, all from one collection. Here my setup using nothing but components and variants.
So my client is an German installation artist, over 40 years of work, which means 120+ project pages. And obviously he didn't want every page to look the same.
Fair enough. But I also wasn't going to build 120 pages by hand, so here's what I ended up with.
(and yes you can use AI too but more to that later)
One content row component with variants. Named by the column splitting
- 2/3 + 1/3, the other way around
- 50/50
- full screen
- 33 / 33 / 33 (three columns)
In the CMS every row has an option field that picks the variant, and each column has conditional visibility bound to it. Empty stuff just disappears. One artwork = one CMS entry. No second collection, no back references, none of that complicated stuff. Maybe im just not smart enough
Well, two things got me.
First one, fit vs fill.
If you put all three columns on fill you need fixed heights, and I have no idea how tall the client's text or pictures are going to be. What worked: middle and left on fill with space between, right column on fit with a fixed gap.
Then your top and bottom items are actually aligned.
Second one, and this is the part where it really gets tricky.
Two columns at 2fr and 1fr next to each other with the same gap do NOT line up with a three column row. I mean this:
2fr___ / 1fr
1fr / 1 fr / 1fr
Looks like theyshould, right? 2/3 and 1/3 together, that's three thirds. Nope.
Framer calculates fr against the whole width, not against your element (I think).
And before you tell me I'm acting dumb (lol) and should just use 19px instead of 38px, no, that doesn't work . I tried.
Ended up building a component just for that case. I named it "clutch double image" because it helped me clutch this .
Also, the canvas lies to you. Framer renders items inside columns even when they're invisible, so half the stuff you're debugging isn't actually broken. Check the live preview first, would have saved me some time.
The nice part is once the fields exist, filling them is boring, so I don't do it. I point Claude Code at the hi-if design PDF and it fills the entry, picks the variants used per row in the hifi design and drops the content from the pdf in the cms. Works better than I expected honestly.
I recorded the whole thing in the editor, my English isn't the best but I hope you will understand it all tho: https://cms-layout.framer.website
Let me know what you think, happy to answer anything about the setup.