freeCodeCamp: Bug in CSS Grid: Use grid-column to Control Spacing

Describe your problem and how to reproduce it: Correct solution lets you not pass test. The grid-column: 2 / 4; is called in the next challenge and even being refered to as well.

Add a Link to the page with the problem: https://www.freecodecamp.org/learn/responsive-web-design/css-grid/use-grid-column-to-control-spacing

Tell us about your browser and operating system:

Browser Name: Google Chrome
Browser Version: 78.0.3904.97 (Official Build) (64-bit)
Operating System: macOS

If possible, add a screenshot here (you can drag and drop, png, jpg, gif, etc. in this box): Screenshot 2019-11-08 at 22 58 59

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 28 (22 by maintainers)

Most upvoted comments

window.getComputedStyle(document.querySelector(‘.item5’)).gridColumn // “2 / 4”

I would go for something like that from @lasjorg’s comment. Here’s what I came up with…

testString: const gridStart = getComputedStyle($('.item5')[0]).gridColumnStart;
const gridEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
const result = gridStart.toString() + gridEnd.toString();
assert(result === "24" || result === "2-1" || result === "2span 2" || 
result === "2span2" || result === "span 2-1" || result === "-12");

I tested this locally on firefox and it looks to be working.

moT01 on Nov 10, 2019

@sascharissling thanks for taking the time to work through this. Those screenshots are a massive help. @RandellDawson how about jumping up to 1? That should still avoid false positives since the wrong answers are out by a lot more than that.

ojeytonwilliams on Nov 9, 2019