Responsive Layout with Subgrid and Media Queries

What are you most proud of, and what would you do differently next time?

I am proud of figuring out how to use subgrid, it made the desktop layout super easy. But when I went to write a media query to have it change to 3 rows instead of 3 columns, it was confusing because I already had some rows for the content within each card for the subgrid so I wasn't sure how to handle that.

I have been learning a lot from youtube and taking lots of notes. I used a lot of what I learned in this project like minmax, subgrid, variables for colors, fixed positioning, and more.

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

The biggest challenge was figuring out how to make 3 main rows with sub-rows within them for sub grid. I was overthinking it for a long time, asked the question on discord, and then figured it out immediately. At first I had the solution of using grid-column-template: repeat(auto-fill, minmax(150px, 1fr); but that was causing one card to be alone on it's own row at certain sizes. I had to use media queries to make that not happen.

Another challenge was figuring out how to center the content for smaller devices. It's still not really centered for phones :(

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

I would love to know if it's possible or a good idea to use container queries for this. I tried to do so but I got confused with where to put the query and how to affect the container itself instead of the children.

I'll happily take any other feedback or ideas as well!