Pick the layout job
Use flex when items move in one direction: a navbar, a button row, a form field, or a hero section with text and an image.
Use grid when you need rows and columns together: project cards, pricing boxes, stats, or a dashboard.
Flex solves alignment
Most unfinished hackathon pages look weak because content touches edges, buttons float oddly, or cards do not line up. Flex fixes small layout problems fast.
Start with flex, then add direction, alignment, and gap. Avoid random margins on every child.
Hero with flex
This is a common landing section for a college project. On a narrow screen, it stacks. On a wider screen, the text and preview sit side by side.
You will learn responsive prefixes in the next lesson. For now, notice how flex and gap do the main layout work.
<section className="mx-auto flex max-w-6xl flex-col gap-8 px-4 py-10 md:flex-row md:items-center md:justify-between">
<div className="max-w-xl">
<p className="text-sm font-medium text-blue-600">HackIndia project</p>
<h1 className="mt-3 text-4xl font-bold tracking-tight text-slate-950">
Track campus expenses without spreadsheets
</h1>
<p className="mt-4 text-slate-600">
Split chai, auto, and hostel costs with friends. Settle with UPI later.
</p>
<div className="mt-6 flex flex-wrap gap-3">
<button className="rounded-lg bg-blue-600 px-4 py-2 font-medium text-white">Try demo</button>
<button className="rounded-lg border border-slate-300 px-4 py-2 font-medium text-slate-900">View repo</button>
</div>
</div>
<div className="w-full max-w-md rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
<div className="h-56 rounded-xl bg-slate-100"></div>
</div>
</section>Grid solves cards
Grid is best when items should share a clean structure. Cards should not depend on the length of the title or the amount of text.
Use grid on the parent. Put spacing between cards with gap. Keep each card simple.
Project card grid
This pattern works for features, team members, events, products, or problem statements. The official Tailwind docs show the same idea with grid columns changing at breakpoints, such as grid-cols-3 md:grid-cols-4 lg:grid-cols-6.
<section className="mx-auto max-w-6xl px-4 py-10">
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{features.map((feature) => (
<article className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
<h2 className="text-lg font-semibold text-slate-950">{feature.title}</h2>
<p className="mt-2 text-sm leading-6 text-slate-600">{feature.description}</p>
</article>
))}
</div>
</section>Do not fight layout
Beginners often add ml-7, mt-11, w-[37%], and absolute positioning until the page looks right on their laptop. Then it breaks on a phone in the demo queue.
Prefer parent layout classes first: flex, grid, gap, items-center, justify-between, grid-cols-*. Use custom values only when the design really needs them.
Use AI carefully
You can ask ChatGPT, Gemini, or Claude to convert a messy section into Tailwind flex or grid. Paste only the component, not secrets or API keys.
Check the answer for three things: the parent has flex or grid, spacing uses gap where possible, and the layout does not rely on fixed pixel widths everywhere.
Prompt:
Rewrite this React section using Tailwind CSS v4 utilities.
Use flex for the hero layout and grid for the cards.
Keep the content the same.
Avoid custom CSS and avoid absolute positioning unless needed.Do this now
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done