Real World Example

Every shopping site has the same grid: 2 columns on phones, 3 on tablets, 4–5 on laptops. Indian traffic is mostly mobile, so design phone-first.

import ProductCard from '@/components/ProductCard';
import { getProducts } from '@/lib/products';

export default async function ProductsPage() {
  const products = await getProducts();
  return (
    <section className="mx-auto max-w-7xl px-4">
      <h1 className="font-display text-2xl font-bold my-6">Mobiles</h1>
      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
        {products.map((p) => (
          <ProductCard key={p.id} name={p.name} price={p.price} mrp={p.mrp} />
        ))}
      </div>
    </section>
  );
}