2 min read
Step 2: Canvas
Build the board canvas with a grid layout.
Where We Are
You have a basic page with a toolbar and empty board. Now let’s make the board a proper grid canvas.
Set Up the Grid
Make the board area use CSS Grid:
- Auto-fill columns that are roughly 200px wide
- Cards should have some gap between them
- The grid should adapt as the window resizes
- Add some padding around the edges
The board should fill the remaining viewport height below the toolbar.Add Placeholder Cards
To test the layout, ask Claude to add some placeholder items:
Add 6 placeholder cards to the board so I can see the grid in action.
Give them different heights to test the layout.
Style them with rounded corners, a subtle border, and a light background.Add Item Controls
In the toolbar, add three buttons for adding items:
- "Add Color" — for color swatches
- "Add Image" — for image URL cards
- "Add Text" — for typography samples
Style them as simple, clean buttons. Don't wire up functionality yet —
just get the buttons in place.Style the Toolbar
Make the toolbar look polished:
- Fixed at the top
- Subtle bottom border or shadow
- App name "MoodBoard" on the left
- Add buttons grouped on the right
- Keep it compact — not too tallTest the Layout
Resize your browser window. The grid should reflow — fewer columns on narrow screens, more on wide screens.
If not:
The grid should be fully responsive. Columns should auto-fill
based on available width. No horizontal scrolling.Checkpoint
- Board uses CSS Grid with auto-fill columns
- Placeholder cards display in the grid
- Toolbar has Add Color, Add Image, and Add Text buttons
- Layout is responsive at different widths
What You Learned
- CSS Grid with auto-fill and minmax
- Fixed toolbars with flexbox
- Viewport height layouts
- Responsive design without media queries