fix: grid column and grid row tests (#37736)

* fix: grid column and grid row tests

* fix: test text verbiage

* fix: add solution to pass build error

* fix: make test more readable

curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.english.md

@@ -34,8 +34,14 @@ Make the item with the class <code>item5</code> consume the last two columns of
 tests:
   - text: <code>item5</code> class should have a <code>grid-column</code> property.
     testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-column:.*}/g));
-  - text: <code>item5</code> class should have a <code>grid-column</code> property which results in the <code>div</code> with the <code>item5</code> consuming the last two columns of the grid.
-    testString: assert(hasCorrectSpacing());
+  - text: <code>item5</code> class should have a <code>grid-column</code> property which results in it consuming the last two columns of the grid.
+    testString: "
+      const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
+      const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
+      const result = colStart.toString() + colEnd.toString();
+      const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2'];
+      assert(correctResults.includes(result));
+    "
 
 ```
 
@@ -83,24 +89,6 @@ tests:
 ```
 
 </div>
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<script>
-const hasCorrectSpacing = () => {
-  const contTwoPlusThreePlusGapWidth = $('.item2').width() * 2 + 10;
-  const item5Width = $('.item5').width();
-  const diff = Math.abs(contTwoPlusThreePlusGapWidth - item5Width);
-  /* To avoid rounding errors the largest allowed diff is set at 0.01px */
-  return diff <= 0.01; 
-};
-</script>
-```
-
-</div> 
-
 </section>
 
 ## Solution

curriculum/challenges/english/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.english.md

@@ -21,8 +21,16 @@ Make the element with the <code>item5</code> class consume the last two rows.
 
 ```yml
 tests:
-  - text: <code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.
-    testString: assert(code.match(/.item5\s*?{[\s\S]*grid-row\s*?:\s*?2\s*?\/\s*?4\s*?;[\s\S]*}/gi));
+  - text: <code>item5</code> class should have a <code>grid-row</code> property.
+    testString: assert($('style').text().replace(/\s/g, '').match(/\.item5{.*grid-row:.*}/g));
+  - text: <code>item5</code> class should have a <code>grid-row</code> property which results in it consuming the last two rows of the grid.
+    testString: "
+      const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
+      const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
+      const result = rowStart.toString() + rowEnd.toString();
+      const correctResults = ['24', '2-1', '2span 2', '2span2', 'span 2-1', '-12', 'span 2span 2', 'span 2auto', 'autospan 2'];
+      assert(correctResults.includes(result));
+    "
 
 ```
 
@@ -80,8 +88,40 @@ tests:
 <section id='solution'>
 
 
-```js
-var code = ".item5 {grid-row: 2 / 4;}"
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+
+  .item5 {
+    background: PaleGreen;
+    grid-column: 2 / 4;
+    /* add your code below this line */
+    grid-row: 2 / 4;
+    /* add your code above this line */
+  }
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
 ```
 
 </section>