Responsive Pricing Cards

Requirements

Build a pricing page grid containing three cards (Starter, Pro, Enterprise) using pure CSS Grid or Flexbox. The layout must stack vertically on mobile screens (< 768px) and display in three columns on desktop viewports.

Expected Output

A fluid, mobile-first pricing plan layout grid adjusting columns dynamically based on screen widths.

Hints & Tips

1Use mobile-first layout rules: write single-column styling first, then add grid columns inside a min-width media query.
2Use `grid-template-columns: repeat(1, minmax(0, 1fr))` on mobile and expand it on md viewports.
3Add a visually distinct highlight border to the 'Pro' card to denote it is recommended.

Senior Code Review Checklist

0 / 4 Checked

Common Architectural Mistakes

1Hardcoding static width definitions (e.g. width: 350px) on card classes, causing overflows on intermediate screen sizes.
2Failing to verify contrast ratios on plan price text.
3Not writing responsive layouts mobile-first, causing bloated media query overrides.

Developer Solution

Click to toggle the recommended code solution

Architectural Explanation

The code creates a responsive CSS Grid. By default, it spans one column. At the 768px viewport mark, it divides into three columns. A designated popularity class adds scaling and color highlights.

Code Snippet

css

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-card {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem;
  background: white;
  transition: transform 0.2s;
}

.pricing-card.popular {
  border-color: #4f46e5;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

Explain in Interview

How to pitch this solution during technical interviews

I design responsive components using mobile-first grid models. Spacings and card columns default to stack grids. Once viewports scale beyond 768px, media queries translate grids into column bands. Spacings use rem values to sync with root font scales.

Loading content…

Requirements

Expected Output

A fluid, mobile-first pricing plan layout grid adjusting columns dynamically based on screen widths.

Hints & Tips

1Use mobile-first layout rules: write single-column styling first, then add grid columns inside a min-width media query.

2Use `grid-template-columns: repeat(1, minmax(0, 1fr))` on mobile and expand it on md viewports.

3Add a visually distinct highlight border to the 'Pro' card to denote it is recommended.

.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 1200px; margin: 0 auto; } @media (min-width: 768px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } } .pricing-card { border: 1px solid #e2e8f0; border-radius: 1rem; padding: 2rem; background: white; transition: transform 0.2s; } .pricing-card.popular { border-color: #4f46e5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transform: scale(1.05); }