Properly Aligning Flexbox and Grid Elements in Lovable

Why flexbox and grid alignment breaks in Lovable-generated layouts

Lovable generates layouts using Tailwind's flexbox and grid utilities, but alignment issues are common because the AI sometimes applies the wrong alignment class for the layout direction. In a flex row (the default), items-center aligns children vertically and justify-center aligns them horizontally. In a flex column (flex-col), these axes swap. Confusing the two is the most frequent alignment bug. Grid alignment has its own quirks. Grid items fill their cell by default, so centering within a grid cell requires place-items-center or explicit alignment on the child. A grid with uneven content heights can create awkward spacing unless you add items-start or items-stretch. Spacing between elements is another common issue. Without gap, flex and grid items sit directly next to each other. Adding margin to individual items is inconsistent — gap provides uniform spacing between all items without affecting the outer edges.

• Confusing items-center (cross-axis) with justify-center (main-axis) based on flex direction
• Missing the parent container's flex or grid declaration — alignment classes only work on flex/grid containers
• Grid items stretching to fill their cells when you wanted them centered within the cell
• Using margin for spacing between items instead of the gap utility
• Flex container missing min-h-screen when trying to center content vertically on the full page

Error messages you might see

Before you start

• A Lovable project with alignment or spacing issues in its layout
• Basic understanding of Tailwind CSS class naming
• The Lovable preview panel open for testing alignment changes

How to fix it

<div>
  <div className="text-center">
    <h1>Welcome</h1>
    <p>This content is not centered vertically</p>
  </div>
</div>

<div className="flex items-center justify-center min-h-screen">
  <div className="text-center">
    <h1>Welcome</h1>
    <p>This content is centered on both axes</p>
  </div>
</div>

<div>
  <div style={{display: 'inline-block', width: '30%', margin: '10px'}}>
    Card 1
  </div>
  <div style={{display: 'inline-block', width: '30%', margin: '10px'}}>
    Card 2
  </div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div className="rounded-lg border p-4">Card 1</div>
  <div className="rounded-lg border p-4">Card 2</div>
  <div className="rounded-lg border p-4">Card 3</div>
  <div className="rounded-lg border p-4">Card 4</div>
  <div className="rounded-lg border p-4">Card 5</div>
  <div className="rounded-lg border p-4">Card 6</div>
</div>

<nav>
  <span>Logo</span>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <button>Sign In</button>
</nav>

<nav className="flex items-center justify-between h-16 px-4 border-b">
  <div className="font-bold text-lg">Logo</div>
  <div className="flex items-center gap-6">
    <a href="/" className="text-sm hover:text-primary">Home</a>
    <a href="/about" className="text-sm hover:text-primary">About</a>
  </div>
  <Button size="sm">Sign In</Button>
</nav>

<div className="flex flex-col justify-center">
  {/* This centers vertically but items stick to the left */}
  <h1>Title</h1>
  <p>Description</p>
  <button>Action</button>
</div>

<div className="flex flex-col items-center justify-center min-h-screen gap-4">
  {/* items-center = horizontal centering in flex-col */}
  {/* justify-center = vertical centering in flex-col */}
  <h1 className="text-3xl font-bold">Title</h1>
  <p className="text-muted-foreground">Description</p>
  <Button>Action</Button>
</div>

Complete code example

1import { Button } from "@/components/ui/button";
2
3const AlignmentExamples = () => {
4  return (
5    <div className="space-y-12 p-8">
6      {/* Example 1: Full-page center */}
7      <section className="flex items-center justify-center h-64 border rounded-lg bg-muted/30">
8        <div className="text-center">
9          <h2 className="text-xl font-bold">Centered Content</h2>
10          <p className="text-muted-foreground">flex + items-center + justify-center</p>
11        </div>
12      </section>
13
14      {/* Example 2: Responsive card grid */}
15      <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
16        {[1, 2, 3, 4, 5, 6].map((i) => (
17          <div key={i} className="rounded-lg border p-6 flex flex-col items-start gap-2">
18            <h3 className="font-semibold">Card {i}</h3>
19            <p className="text-sm text-muted-foreground flex-1">Card content</p>
20            <Button size="sm" variant="outline">Action</Button>
21          </div>
22        ))}
23      </section>
24
25      {/* Example 3: Navigation bar */}
26      <nav className="flex items-center justify-between h-16 px-6 border rounded-lg">
27        <span className="font-bold">Logo</span>
28        <div className="flex items-center gap-6">
29          <a href="#" className="text-sm">Home</a>
30          <a href="#" className="text-sm">About</a>
31          <a href="#" className="text-sm">Contact</a>
32        </div>
33        <Button size="sm">Sign In</Button>
34      </nav>
35
36      {/* Example 4: Vertical stack centered */}
37      <section className="flex flex-col items-center gap-4 py-12 border rounded-lg">
38        <h2 className="text-2xl font-bold">Vertical Center</h2>
39        <p className="text-muted-foreground">flex-col + items-center + gap</p>
40        <Button>Click Me</Button>
41      </section>
42    </div>
43  );
44};
45
46export default AlignmentExamples;

Best practices to prevent this

• Use flex items-center justify-center min-h-screen as the standard pattern for full-page centering
• Use grid with responsive column counts (grid-cols-1 md:grid-cols-2 lg:grid-cols-3) for card layouts
• Always use gap instead of margin for spacing between flex/grid children — it provides consistent spacing
• Remember that in flex-col, items-center becomes horizontal centering and justify-center becomes vertical centering
• Add min-h-screen or a specific height to flex containers when vertical centering — it needs extra space to center against
• Use justify-between for navigation bars to push groups of items to opposite edges
• Use flex-1 on a child to make it fill remaining space in a flex container
• Use items-stretch (default in grid) for equal-height cards, or items-start for natural-height cards

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns