DEV Community: veloxsoft-web

🍱 How to build a Responsive Bento Grid with Tailwind CSS (No Masonry.js)

veloxsoft-web — Wed, 21 Jan 2026 09:02:00 +0000

Everyone wants a "Bento Grid" portfolio these days. It’s the design style popularized by Apple and Linear: a grid of boxes, high information density, and sleek rounded corners.

But building one that actually works on mobile is a headache.

Usually, developers reach for heavy JavaScript libraries like Masonry.js to handle the layout. But I wanted a portfolio that scores 100/100 on Lighthouse, so I decided to build it using pure CSS and Tailwind.

Here is how I solved the responsive puzzle.

The Problem: The "Swiss Cheese" Effect
When you use a standard CSS Grid with items of different sizes (some spanning 2 rows, some spanning 2 columns), you often end up with ugly gaps in your layout—especially when resizing the window.

The Solution: grid-auto-flow: dense
The magic property that solves 90% of Bento layouts is dense. This tells the browser to fill in the holes in the grid with smaller items if they fit, even if it changes the visual order slightly.

Here is the Tailwind implementation I used for my portfolio:

// The Main Container

{/* The items go here */}

Key Breakdown:

grid-cols-1: On mobile, it's just a vertical feed (one column). No complex reordering needed.

md:grid-cols-3: On tablets and desktops, it expands to a 3-column grid.

auto-rows-[250px]: This forces every row to have a fixed height, making the calculation of "tall" items (spanning 2 rows) predictable.

Handling the "Span" Items
To make it look like a Bento box, some items need to be bigger. I created a reusable component that accepts colSpan and rowSpan props.

// Inside your Card Component

{children}

Why Avoid Flexbox for this?
I tried Flexbox first. The problem with Flexbox is that it doesn't align items on both the X and Y axis simultaneously. You end up with columns of uneven height. CSS Grid is the only way to get that perfect "aligned" Bento look without using JavaScript to calculate positions.

Performance Result
By avoiding client-side libraries for layout:

0 Layout Shift (CLS) on load.

Javascript bundle size remains minimal.

SEO: Google reads the content perfectly because it's just HTML divs.

Conclusion
You don't need complex libraries to build modern layouts. CSS Grid has matured enough to handle the "Bento" style natively.

👋 By the way...

I spent the weekend polishing this system into a reusable Next.js template (Dark mode, animations, and responsive components included).

If you want to save time and just grab the code, you can check it out here: https://veloxweb.gumroad.com/l/launch-ui

Otherwise, happy coding!

700 views vs 8% conversion: Why I redesigned my Next.js site to a Bento Grid (Day 3)

veloxsoft-web — Tue, 20 Jan 2026 09:18:47 +0000

The Reality Check 📉

I'm 3 days into my "Building in Public" challenge. Yesterday, the algorithm blessed me: 700+ views on my update video.

I thought: "This is it. Sales are coming."

The reality?

60 actual visitors to the store.
8% conversion rate.

The traffic was there, but the retention wasn't. My landing page was leaking users. It looked generic.

The Pivot: Bento Grids 🍱

I decided to go to war with my own design. I looked at what top-tier dev tools (like Linear or Vercel) are doing. The pattern is clear: Bento Grids.

It organizes complex info into digestible "boxes". It feels premium.

So, I fired up VS Code, nuked my old layout, and started fresh with Next.js 14 and Tailwind CSS.

The Code (How I built it)

The magic of Bento Grids in Tailwind is mastering grid-cols and col-span. Here is a simplified version of the main grid structure I deployed:

export default function BentoGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4 max-w-4xl mx-auto p-4">

      {/* Hero Box - Spans 2 columns */}
      <div className="col-span-1 md:col-span-2 row-span-2 bg-neutral-900 border border-neutral-800 rounded-xl p-6 flex flex-col justify-between">
        <h1 className="text-4xl font-bold text-white">The Ultimate Kit</h1>
        <p className="text-gray-400">Boost your workflow instantly.</p>
      </div>

      {/* Feature A */}
      <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6">
        <span className="text-3xl">🚀</span>
        <h3 className="font-bold mt-2 text-white">Next.js Ready</h3>
      </div>

      {/* Feature B */}
      <div className="bg-neutral-900 border border-neutral-800 rounded-xl p-6">
        <span className="text-3xl">🎨</span>
        <h3 className="font-bold mt-2 text-white">Tailwind CSS</h3>
      </div>

      {/* Pricing Box - High Contrast */}
      <div className="col-span-1 md:col-span-2 bg-indigo-600 rounded-xl p-6 flex items-center justify-between cursor-pointer hover:bg-indigo-700 transition">
        <div>
           <h3 className="text-white font-bold text-lg">Get it now</h3>
           <p className="text-indigo-200 text-sm">Limited offer</p>
        </div>
        <span className="text-3xl font-bold text-white">€3</span>
      </div>

    </div>
  );
}

The Pricing Strategy 🏷️
To test if the friction was purely design or also monetary, I made a bold move: I set the price to €3.

It's the "no-brainer" zone. Less than a coffee.

What's Next?
I just deployed the new version. I'm tracking two things:

Click-through rate on the Grid elements.

Final purchase conversion.

If you are curious about the live result or want to support the challenge, you can check it here: https://veloxweb.gumroad.com/l/launch-ui

Follow me for Day 4 metrics! 🚀

Stop wasting time on Landing Pages: My Next.js + Tailwind Boilerplate

veloxsoft-web — Mon, 19 Jan 2026 09:37:10 +0000

Hi everyone, I'm documenting my journey from developer to founder. Yesterday I launched a tool and got exactly 0 sales. It hurt.

I realized I spent 48h fighting with CSS and design instead of marketing. So, to fix my own problem (and stop procrastinating), I spent last night building a reusable Next.js Landing Page Boilerplate with a Bento Grid layout.

Now I can spin up a new SaaS landing page in minutes, not days.

I put it on Gumroad for $9 to fund my coffee addiction, but I'd love your feedback on the code structure if anyone wants to check it out.

URL:
https://veloxweb.gumroad.com/l/launch-ui

nextjs #react #webdev #productivity