Responsive 3-column card using Grid

Hello amazing community! 🎉

Would like to share the results of my struggle to make CSS Grid works. 🤓 It was quite a challenge for me to make it work since there is a lot of tricky things with Grid. But I'm pretty satisfied with the final work. And I've definitely learnt a lot:

• how to plan your work if you use Grid: how many columns and rows you'll need, their sizes, what units to use and why, use grid-area or grid-row and grid-column etc.

• finally feel confident using grid-row and grid-column;

• how to center vertically and horizontally grid container (the most time I spent was trying to figure out how to place it in the center of the viewport). My solution was to add 1fr on top and bottom of the container and on the left and right with fixed height for the container:

.container {
        height: 100vh;
        margin: 0;
        grid-template-columns: 
            1fr repeat(3, minmax(150px, 20.5rem)) 1fr;
        grid-template-rows: 1fr auto 1fr;
    }

What is your solution for placing the grid container in the center of the viewport?

• in addition to Grid, I've set another goal which is to learn more how relative units and how they work;
• practice a little bit with pseudo classes (such as :nth-child());
• and it was my first try of mobile-first approach, which I definitely liked!

What did you practice on this challenge?