CSS · Exercise 5 of 5 Previous
Advanced
Pricing cards that line up
Three pricing plans sit side by side, but one plan name wraps onto two lines and the feature lists have different lengths, so the lists and the buttons don't line up.
Use subgrid so that, across all three cards, the feature lists start at the same height and the buttons sit on the same line. Keep the three cards in one row.
What Check tests
- The three plans are side by side
- The feature lists start at the same height
- The buttons are on the same line
- The cards use subgrid
- Each card spans three rows of the parent
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.