@John-Davidson-8
Posted
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
