Testimonials grid

Community feedback

• 

  P

  John Davidson•210

  @John-Davidson-8Posted 3 months ago

  Hello @SirTebz,

  Fellow newbie here on FEM. Your solution looks amazing, congratulations. I too have completed this project using CSS Grid. One thing I did notice was in your CSS you use grid-column: 3 / 4; grid-row: 1 / 2;

  I learned a trick when completing this project to shorten the code to one line eliminating grid-row and column property. It is to use the grid area property which combines them on to one line like this:

  grid-area: 1 / 3 / 2 / 4;

  Below is the explanation from ChatGPT.

  Explanation: The grid-area property follows the syntax grid-area: row-start / column-start / row-end / column-end;. grid-column: 3 / 4 corresponds to column-start: 3 and column-end: 4. grid-row: 1 / 2 corresponds to row-start: 1 and row-end: 2. Thus, grid-area: 1 / 3 / 2 / 4 combines both properties into one line.

  Hope that helps for next Grid project, anything to write less code. On to the next project for me.

  All the best

  John

  0