Frontend Mentor - 3-column preview card component solution

This is a solution to the 3-column preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover states for interactive elements

Links

• Solution URL: GitHub.com
• Live Site URL: view live site

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

I ran into a little problem when I noticed that the width of the grid items wasn't uniform which was mainly because they grow according to the amount of contents with them. I did some trials and errors by trying to manipulate their max and min width, margin, padding (literally anything that could help) which all proved abortive. I googled about grid to see if there was a property I was missing and I came across grid-auto-columns. That pretty much solved the problem, but there was another problem; after setting the grid-auto-columns to 33%, the grid items had spaces in between them (which was not suppose to be so). well, I fixed it with this

#container {
    grid-auto-columns: 33.33333333%;
    } /* that is 100% divided by 3 columns */

overall it was a pretty exciting challenge and I'm looking forward to completing more challenges.

Continued development

I am gonna keep working on perfecting my CSS grid skills, also with flexbox but I definitely prefer grids

Useful resources

• w3schools grid auto columns - This really helped me understand grid-auto-columns. I'd recommend it to anyone still learning this concept.

Author

• Frontend Mentor - @kushyzee