Project 20: Pricing Table
CSS Stylist
Builds on these lessons
Step 1 of 2
Project
A Complex Named Grid
Lay out three pricing tiers with grid-template-columns: 1fr 1.2fr 1fr — the middle "Pro" column gets extra width and, with grid-row: span 2 on its container, extends further down than its neighbors to visually stand out as the featured plan.
🎯 Your Task
Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1.2fr 1fr;
gap: 16px;
align-items: start;
}
.pricing-tier--featured {
grid-row: span 2;
}