OP here. I spent the weekend trying to build a "Bento" style portfolio (Apple-like grids) that doesn't break on mobile or require heavy Masonry JS libraries.
The challenge was keeping the aspect ratios consistent while making it responsive. I ended up solving it using Next.js 14 and Tailwind's native grid system (heavy use of `grid-cols` combined with `row-span` utilities).
It scores 100/100 on Lighthouse and has zero layout shift.
I packaged the code as a template for those interested (link in the footer), but I'm mostly looking for feedback on the CSS implementation.
Do you think CSS Grid is robust enough for this complexity, or do you still prefer Flexbox/JS for layouts that need to reorder significantly on mobile?
asliper•1h ago
OP here. I spent the weekend trying to build a "Bento" style portfolio (Apple-like grids) that doesn't break on mobile or require heavy Masonry JS libraries.
The challenge was keeping the aspect ratios consistent while making it responsive. I ended up solving it using Next.js 14 and Tailwind's native grid system (heavy use of `grid-cols` combined with `row-span` utilities).
It scores 100/100 on Lighthouse and has zero layout shift.
I packaged the code as a template for those interested (link in the footer), but I'm mostly looking for feedback on the CSS implementation.
Do you think CSS Grid is robust enough for this complexity, or do you still prefer Flexbox/JS for layouts that need to reorder significantly on mobile?
Thanks!