Four Card Feature

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

I was able to make the designs quickly and surprised myself with how easily I was able to make it responsive this time. I also felt like I had way less redundancies this time. Next time I will try to get the grid system down without any outside resources.

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

I was having trouble with the grid layout, positioning the outer cards in the middle of the middle two cards. I used chat gpt to show me how grid-template-columns and grid-template-rows work. I asked it to elaborate so I could learn from it.

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

For this specific project I noticed that when working with grid-template, my divs would expand to unusual lengths when working with the grid-columns/rows. For example,

  .content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }

  .content-grid div:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 2 / 4;
  }

the 1st child would elongate and become bigger than the other children. It wasn't until I finished positioning the last child that they all snapped back into their original space. Why is that? what are your favorite resources to learn and practice grid and grid-template stuff?