Four Card Feature Section

What challenges did you encounter, and how did you overcome them?

The main challenge I faced was aligning the cards using CSS Grid to match the design layout. To improve my understanding, I practiced grid concepts using CSS Grid Garden, to learn how grid placement works.

Later in the project, I struggled with making the middle column the same width as the side columns. I tried several approaches but couldn’t get it right until I watched Kevin Powell’s YouTube video, where he attempted the same challenge using both Flexbox and Grid. That’s where I learned about the grid-auto-columns: 1fr property. I then looked for the css equivalent from the Tailwind Docs and applied it, auto-cols-fr, which solved the issue.

What specific areas of your project would you like help with?

Currently none, but any feedback is welcome.