fourCardFeature_figmaChallenge

What are you most proud of, and what would you do differently next time?

Honestly? I’m proud that I didn’t give up. There were so many points this week where I wanted to scrap the whole thing and switch to Flexbox (which would’ve been way easier). But I stuck with CSS Grid even when it made me want to throw my laptop out the window.

I’m also proud that I learned to trust the grid system. Once I stopped trying to force it and started thinking in rows, columns, and spans, everything started to make more sense. That mindset shift is something I’ll carry into future projects.I’d definitely start with a 12-column grid right away. I originally used 5 columns without knowing why, which just made layout math harder. I also over-nested elements (like wrapping cards inside .content-wrapper), which caused a ton of alignment issues. Next time, I’ll start simpler and avoid adding complexity unless it’s needed.

And I’d double-check my syntax early—I lost hours to one space in 1 fr (repeat(5, 1 fr) instead of 1fr). Brutal.

What challenges did you encounter, and how did you overcome them?

Broken layouts with no clear error – I realized that invalid CSS (like repeat(5)) doesn’t throw errors, it just silently fails. I had to dig into DevTools to understand what was going on under the hood.

Misaligned card widths – The cards weren’t lining up because of mixed grid contexts. Removing the nested .content-wrapper and placing all cards in one unified 12-column grid finally solved it.

Column stretching – I learned how even small content differences can stretch grid tracks. I used min-width: 0, removed floats, and inspected grid overlays.

Temptation to quit – This was real. But I asked for help (including Stack Overflow, LinkedIn, and Discord), and that made all the difference.

What specific areas of your project would you like help with?

The mobile layout! I think I got the @media (max-width: 600px) logic right, and I’m stacking cards the way I want, but I’d love a fresh set of eyes to double-check that:

My grid-column values are clear and consistent

I’m not overcomplicating the stacking order

My padding/margins are responsive-friendly

If anyone spots any refactor opportunities or smarter ways to handle breakpoints, I’d love to hear them!