Testimonial Grid Using HTML and CSS

Community feedback

• 

  Jergus Lysy•230

  @j3rgusPosted about 1 year ago

  Hello Elizabeth Bartholomew.

  Another way to do this is to use grid layout with column/row spanning. Deploying this will save you many lines in stylesheet and allow you for a simple way to deploy media queries for responsiveness.

  One way to deploy grid would be:

  1. Center the main component (typically with flex container centering on X and Y axis).
  2. Display component itself as a grid 2x4 (2 rows, 4 columns) with each person testimonial as an item of the grid.
  3. Select items inside the grid which you like to span (eg. Daniel horizontally, Kira vertically).
  4. Add media query with modified grid template (so that the grid displays in one column with all the items) and rearrange each spanned item.

  By utilizing the grid you can set a gap between each item which helps you to reduce many margins or padding from within the items itself.

  Hope this helps.

  0