Testimonial grid section using CSS Grid and container queries

Community feedback

• 

  Aleksei Bodeev•370

  @alekseibodeevPosted 3 months ago

  Hi, there 👋. Great solution!

  Here are some tips 💡

  Background-image

  You can place background image without bloating HTML with just decorative content and avoid relative positioning:

  .testimonial {
    background-color: /* your color */
    background-image: /* path to image */
    background-position: /* position relative to container */
    background-repeat: /* turn on/off repeat pattern */
    background-size: /* image size */
  }
  

  You can read more about background-* properties on MDN article

  BEM

  Since you use BEM it's good to make use of modifiers. Modifiers are more appropriate option for alternative style variants for your blocks. For example you could have something like this:

  HTML:

  <article class="testimonial testimonial_variant_darkblue">
    ...
  </article>
  

  CSS:

  .testimonial {
    /* default styles */
  }
  
  .testimonial_variant_darkblue {
    /* theme specific styles */
  }
  

  You still need to use .g-item-{order} selectors for positioning.

  Marked as helpful

  1