A Responsive Project Grid
CSS Without the C: Layouts with Grid
Every great portfolio needs a clean way to show off your work. The classic pattern is a grid of project cards — neat rows and columns that automatically reflow as the screen changes size.
The old way meant wrestling with floats and clearfixes. The new way? You describe what you want — "three equal columns with a gap" — and Tailwind's grid utilities handle the rest. No CSS file required.
In this lesson you'll build a responsive project grid: a heading, then a grid container holding three cards. By the end you'll understand grid, grid-cols-3, and gap — the three tools you'll reach for again and again.
Instructions
Add an h2 section heading above your grid so visitors know what they're looking at.
Hint: Use: `<h2 class="text-3xl font-bold mb-8 text-center">Selected Projects</h2>`
Where does this go?
<!-- Build your project grid here -->Write it on line 12 — under that comment, after the code you already added.
Create a grid container div using grid with a gap between cards.
Make the grid show three equal columns on medium screens and up.
Add at least one project card inside the grid using an article element with a title and description.
Your Code
Describe what you want to build for this step and I'll write the code — then click Apply to drop it into your editor. This step: Add an h2 section heading above your grid so visitors know what they're looking at.