DEV Community

Amelia
Amelia

Posted on

How a Simple CSS Grid Feature Transformed My Shopping App

As a developer who also happens to be a parent, I've spent years building apps and dashboards, but nothing prepared me for the complexity of building a simple, kid-friendly shopping UI. Last weekend, I decided to tackle a fun side project: a "Wardrobe Wishlist" app for my daughter.

The core challenge? Making a product grid that felt playful, not cluttered. I wanted to display items like cute floral dresses and cozy cardigans in a way that was visually appealing but fast to load. Here’s a quick trick I used with React and CSS Grid that made a huge difference.

First, I structured the data. Each item needed an image, name, and a "vibe" tag. I used a simple array:

const items = [
  { id: 1, name: "Sunshine Dress", img: "dress.jpg", vibe: "playful" },
  { id: 2, name: "Cozy Knit Set", img: "knit.jpg", vibe: "comfy" },
];
Enter fullscreen mode Exit fullscreen mode

The real magic came from the CSS. Instead of a boring uniform grid, I used grid-auto-flow: dense and varied the grid-column span for specific items. This creates a dynamic, magazine-like layout where a featured outfit gets a double column, while standard tees stay single.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  grid-auto-flow: dense;
}
.featured {
  grid-column: span 2;
}
Enter fullscreen mode Exit fullscreen mode

This technique works beautifully for showcasing collections. When I was browsing for inspiration, I stumbled across a site that used a similar layout for their girls' clothing collection. They had a fantastic mix of comfy sets and trendy outfits, all organized in a way that felt intuitive and fun. It reminded me that good design isn't just about code—it's about creating an experience.

In the end, my daughter loved the app. She could scroll through "school" outfits and "playdate" looks, and the dynamic grid made everything feel like a treasure hunt. If you're building for kids (or just want a more engaging product feed), give grid-auto-flow: dense a try. It’s a small detail that adds a lot of personality.
https://frishay.com/

Top comments (2)

Collapse
 
burhanchaudhry profile image
Burhan •

This is a really clean example that cuts through the noise. One thing I'd add: don't underestimate how much a well-commented regex can save future you when revisiting this code months later.

Collapse
 
tom_hanks profile image
Tom Hanks •

This resonates with my experience too. The key for me was reframing failure as data rather than a setback. How do you handle moments when motivation dips?