CSS Grid Testimonial Section

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

CSS grid is incredible for building complex, responsive layouts. I learned how to utilize grid-template-areas to make incredibly flexible layouts, making it a breeze to move things around as needed. Using this simple setup:

.grid-container {
  display: grid;
  gap: 1.5rem;
  grid-auto-columns: 1fr;
  grid-template-areas:
    "card-1"
    "card-2"
    "card-3"
    "card-4"
    "card-5";

  padding-block: 2rem;
  margin-inline: auto;
  width: min(95%, 70rem);
}

All I needed to do was rearrange the layout in a media query:

@media screen and (min-width: 70em) {
  .grid-container {
    grid-template-areas:
      "card-1 card-1 card-2 card-5"
      "card-3 card-4 card-4 card-5";
  }
}

And just like that, you have two totally different layouts for mobile and web, both fully responsive. It truly is a beautiful thing!

Also took advantage of CSS psuedo selectors to make styling the grid easier.

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

Using all of the pseudo selectors, I ran into some styling conflicts and some styles overriding others and all that fun stuff. Thankfully I got it all sorted out pretty quickly!