Beta - CSS Grid - Use grid-column to control spacing - Add Visual Reference

Challenge Name

http://localhost:3000/en/challenges/css-grid/use-gridcolumn-to-control-spacing

Issue Description

There isn’t an issue with the challenge itself But campers may have an issue visualizing the grid lines referred to in the challenge without a visual aid Two possibilities. Either:

1. we can add an external link to an image or reference documentation
2. add them to the preview

Browser Information

• Browser Name, Version:
• Operating System:
• Mobile, Desktop, or Tablet:

Your Code

Screenshot

ORIGINAL PREVIEW:

SUGGESTION 1: ADD EXTERNAL RESOURCE LINK: css-tricks

SUGGESTION 2: ADD TO PREVIEW - so something like this I guess

[moT01]

@ahmadabdolsaheb I would guess yes. I thought they would be easier to understand if they were separate. I’ll add them and see how much space it’s taking up - and maybe combine them if it doesn’t look good.

[ahmadabdolsaheb]

@QuincyLarson @moT01 the challenge seed only accepts inline html styling and writing inline animations is not possible. So i converted the styles to inline styles and removed the animation. here is what I got: https://codepen.io/abdolsa/pen/mxmYaw?editors=1000 let me know if it needs improvements or not. thanks