Problems with grid-template properties / CSS Grid

[jeaniiine]

Hi

I am stuck at the Learn CSS: Grid / CSS Grid Essentials / Grid Template Exercises (steps 3 through 9).
https://www.codecademy.com/courses/learn-css-grid/lessons/css-grid-i/exercises/grid-gap?action=lesson_resume&course_redirect=learn-css

When creating columns, rows and gaps with the grid-template and grid-gap properties, it does not show it in the test browser to the right. The grid there always stays the same:

Although the exercise judge says I solve the exercises correctly (by turning green and letting me move one step forward), it does not change the grid.
I copied the code into Notepad++ and had it display with Chrome. The result was the same: I was able to change width and height, but unable to create more than one column.
One hint I got was that Notepad++ did not turn the two grid-properties light blue, as it did with the others. So I guess, the error is to be found somewhere in that area. However, I’m still stuck. Thank you for helping.

I copy my CSS code here

.grid {
  display: grid;
  border: 2px blue solid;
  height: 500px;
  width:400px;
  grid-template: repeat(3, 1fr) / 3fr 50% 1fr;
  grid-gap: 20px 5px;
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

[stetim94]

if i put your code in jsbin:

JS Bin

the output shows fine? I don’t see any problems

[jeaniiine]

@stetim94: Thank you, good to know that the code is not the problem. Maybe it has something to do with my browser settings… I will do some research.

[jeaniiine]

@stetim94: just one question: should’t there be three columns visible? The grid-template defines three columns with the widths of 3fr 50% 1fr. In the link you posted I still only see one column…

[stetim94]

the link i posted doesn’t, show please click here

well, in the first row we have 3 columns: ABC
in the second row we have 3 columns: DEF
and in the third row we have 1 column: G

[jeaniiine]

On my previous laptop, it still won’t show any changes when I look at it with JS Bin. I just opened it on a different device and here it works just fine, be it in JS Bin or in the Codecademy exercise. I guess the problem is solved - I wonder why, though. If anyone has an idea, please post

@stetim94: thank you for your help

[stetim94]

well, it could be your browser wasn’t compatible yet:

grid