Constrained Flex Cards

Phase 3 layout with predictable Phase 4 sizing

What changed?

Each card uses border-box, percentage width, max-width, min-width, and min-height.

Inputs and images can safely use width: 100% because borders and padding stay within the declared width.

Open notebook beside a black pen

Starter Notes

Simple personal workspace

  • Three boards
  • Local drafts
  • Basic export
Organized worktable with design materials

Studio

Flexible project workspace

  • Unlimited boards
  • Shared reviews
  • Version history
Team members working around a shared desk

Team

Shared workspace for groups

  • Five seats
  • Admin controls
  • Team templates

Why border-box helps here

  1. The card's padding and border stay inside its percentage width.
  2. The input's padding and border stay inside width: 100%.
  3. max-width prevents cards and images from stretching too far.
  4. min-height creates visual consistency while allowing longer content.

Important CSS

Cards combine border-box with flexible width limits.

.card {
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-width: 220px;
  min-height: 180px;
}