CSS Pricing Table Examples

Pricing layouts should make features, limitations and cost easy to compare without manipulating reading order.

Use a Grid with auto-fit to present independent plan cards. Give each plan a clear heading, price, billing period, features and a real call-to-action link or button.

Emphasize a featured plan with a border and label—not only a bright background. Do not invent plan prices or claims in a production interface: the following values are illustrative.

Equal-size Grid tracks align plan columns while each card height grows naturally with its content.

Show plan name, illustrative cost and included features.

HTML

<div class="plans"><article><h3>Basic</h3><strong>$9/mo</strong><p>For individuals</p></article><article><h3>Team</h3><strong>$24/mo</strong><p>For groups</p></article></div>

CSS

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr)); gap: 10px; } .plans article { padding: 18px; border: 1px solid #cbd5e1; border-radius: 10px; } .plans h3 { margin: 0 0 8px; } .plans p { color: #475569; }

Rendered output

Observe: Two pricing cards stay readable at narrow widths.

Add a highlight label and clear feature lists.

HTML

<div class="plans"><article><h3>Basic</h3><strong>$9/mo</strong><ul><li>1 project</li><li>Email help</li></ul><a href="#basic">Choose Basic</a></article><article class="featured"><span>Most popular</span><h3>Team</h3><strong>$24/mo</strong><ul><li>Unlimited projects</li><li>Priority help</li></ul><a href="#team">Choose Team</a></article></div>

CSS

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: 12px; } .plans article { padding: 17px; border: 2px solid #cbd5e1; border-radius: 11px; } .plans article.featured { border-color: #0f766e; background: #ecfdf5; } .plans h3 { margin: 9px 0; } .plans ul { padding-left: 20px; line-height: 1.7; } .plans span { color: #065f46; font-size: 12px; font-weight: 700; } .plans a { color: #1d4ed8; }

Rendered output

Observe: The featured border and label stand out, while both plans remain usable.

Equal-size Grid tracks align plan columns while each card height grows naturally with its content.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Avoid hiding fees or conditions in difficult-to-find text.

• A visual recommendation should not replace accurate plan descriptions.

Add a third plan with a distinct set of features and confirm the grid remains responsive.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Pricing pages should favor clarity and fair comparison over decoration.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.