Independence Note: Render 6 dummy squares using local state. No real data fetching is needed.
Context:
Bounties typically display rich information. A simple list is boring. We need a fluid, masonry-like or strict grid arrangement to display bounty cards gracefully across mobile and 4k screens.
Objective:
Implement a highly robust CSS Grid layout shell.
Acceptance Criteria:
Technical Pointers:
- Avoid flex-wrapping if possible. CSS Grid
grid-cols-X handles complex alignment far better when child components have variable text heights.
Independence Note: Render 6 dummy squares using local state. No real data fetching is needed.
Context:
Bounties typically display rich information. A simple list is boring. We need a fluid, masonry-like or strict grid arrangement to display bounty cards gracefully across mobile and 4k screens.
Objective:
Implement a highly robust CSS Grid layout shell.
Acceptance Criteria:
BountyGrid.tsxgeneric wrapper component.grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4).gap-6bridging the elements comfortably without squishing content.Technical Pointers:
grid-cols-Xhandles complex alignment far better when child components have variable text heights.