Responsive Testimonials Grid Section using CSS Grid

Community feedback

• 

  P

  Huy Phan•3,400

  @huyphan2210Posted about 1 month ago

  Hi @rukhulkirom,

  I've seen your solution and would like to share my thoughts:

  Regarding your nth-child selectors issue, I’d recommend creating separate classes based on the features of each .item.

  Why?

  In real-world applications, data is typically fetched dynamically, so you wouldn't know in advance how many .item elements your application will have. Right now, your page has five .items, but what if there are 6, 7, or even 50? How would you arrange them in the layout? It’s important to think about scalability.

  If you want to organize .items in groups of five, I'd suggest creating a class for each type of .item. For example, .item--purple-bg could represent items with a purple background.

  How to Apply This

  You can use JavaScript/TypeScript to add these classes dynamically based on their index. For example:

  document.querySelectorAll('.item').forEach((item, index) => {
    if (index % 5 === 0) item.classList.add('item--purple-bg');
  });
  

  Alternative: Using SASS/SCSS

  If you prefer not to use JavaScript/TypeScript, you can still use nth-child, but instead of plain CSS, leverage SASS/SCSS. It supports loops and math calculations, allowing you to generate styles dynamically.

  For example, if you assume a maximum of 100 .items:

  @for $i from 1 through 100 {
    .item:nth-child(#{$i}) {
      background-color: if($i % 5 == 0, purple, inherit);
    }
  }
  

  This way, your styles scale better while keeping your CSS manageable.

  Regarding your grid-template-areas issue, you've already used media queries, which is a good approach to handling layouts for different screen sizes. However, I’d recommend using a mobile-first approach—styling for smaller screens first, then progressively enhancing for larger screens.

  Right now, you're using a desktop-first approach, which isn’t necessarily wrong, but it comes with limitations. For example:

  • It often requires more overrides in CSS when adapting to smaller screens.
  • Mobile-first styles generally lead to better performance since smaller devices load fewer unnecessary styles.
  • It ensures better scalability as new devices with varying screen sizes emerge.

  Additionally, I’d recommend defining the scope of the minimum and maximum widths your design should support. You can’t accommodate every device—especially newer ones with unique aspect ratios—so it’s best to focus on a realistic range that covers most users.

  Hope this helps! 🚀

  1