glow/first-home-diy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

UI: 5 pillar cards create uneven grid at all breakpoints #62

New issue
Closed
opened 2026-06-09 21:35:06 +00:00 by glow · 1 comment
glow commented 2026-06-09 21:35:06 +00:00
Owner
Copy link

The "Pick a starting point" grid has 5 pillar cards. In the 2-column desktop layout, the second row has 1 card sitting alone. At mobile 1-column layout, there's an odd number.

Location

`src/routes/index.tsx` lines 57-88, `src/lib/articles-types.ts` PILLARS constant

Suggested Fix

  1. Add a 6th pillar (e.g. "Seasonal Maintenance" or "Tools & Gear")
  2. Use 3-column grid for desktop
  3. Feature card spanning 2 columns + 2x2 grid for remaining 4
  4. Hide empty pillars from grid
The "Pick a starting point" grid has 5 pillar cards. In the 2-column desktop layout, the second row has 1 card sitting alone. At mobile 1-column layout, there's an odd number. ## Location \`src/routes/index.tsx\` lines 57-88, \`src/lib/articles-types.ts\` PILLARS constant ## Suggested Fix 1. Add a 6th pillar (e.g. "Seasonal Maintenance" or "Tools & Gear") 2. Use 3-column grid for desktop 3. Feature card spanning 2 columns + 2x2 grid for remaining 4 4. Hide empty pillars from grid
glow closed this issue 2026-06-09 21:45:31 +00:00
glow commented 2026-06-09 21:45:33 +00:00
Author
Owner
Copy link

Fixed in commit 2126cc5.

Changes:

  • Grid changed from md:grid-cols-2 to md:grid-cols-3 — 5 pillar cards now render as 3+2 instead of 2+2+1
  • First card (repairs) gets md:col-span-1 lg:col-span-1 — full width on mobile, single column on desktop

Closes #62.

Fixed in commit 2126cc5. Changes: - Grid changed from `md:grid-cols-2` to `md:grid-cols-3` — 5 pillar cards now render as 3+2 instead of 2+2+1 - First card (repairs) gets `md:col-span-1 lg:col-span-1` — full width on mobile, single column on desktop Closes #62.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels   
bug
Bug fix

  
feature
New feature

  
improvement
Code improvements and refactors

No labels
bug
feature
improvement
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
glow/first-home-diy#62
No description provided.