This is a solution to the Pricing component with toggle challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the component depending on their device's screen size
- Control the toggle with both their mouse/trackpad and their keyboard
- Bonus: Complete the challenge with just HTML and CSS
- Solution URL: Gitub
- Live Site URL: Deployed on Netlify
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Centering grid items in an auto-fill container - Something I've been bumping into regularly when using
auto-fit
for grid, is the grid no longer being centered. I usuasllu would look for work-arounds, but thought today that that was a silly solution and I should have a look at Stackoverflow. The solution is too straight-forward actually:justify-content: center
.
.cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16.5rem, 20rem));
justify-content: center;
gap: 2rem;
margin-inline: auto;
margin-top: 4rem;
}
- Build a toggle button with only HTML and CSS - I used this code to create my toggle.
- CSS Demystified by Kevin Powell - These price cards are exactly the example Kevin uses in the first chapter of his CSS Demystified course, talking about inheritance and custom variables. So I implemented his suggestion.
- Website - Katrien Schuermans
- Frontend Mentor - @graficdoctor
- Twitter - @graficdoctor