CSS Grid not loading correctly

Question

All of my JavaScript seems to work based on my tests, but the CSS grid-template-columns seems to not be capturing or something? I had it working before not sure what happened...

If I input "10" into the prompt which creates 100 divs - the screen only creates 100 rows in one single column --it should be creating 10 columns and 10 rows....

Any idea what's happening?

CODE

.container {
  display: grid;
  padding: 0;
  grid-template-columns: repeat (10, 1fr);
  grid-template-rows: repeat (10, 1fr);
  gap: 2px;
  margin: none;
}

.boxes {
  background-color: black;
}

.boxes:hover {
  background-color: rgb(194, 243, 250);
}

Answer 1

Your grid-template-columns and grid-template-rows value expressions are syntactically invalid: you have a space between repeat and (. The CSS Grid specification's syntax rules do not allow for a space to be located there.

(Also, it's margin: 0;, not margin: none;. none is for border).

Change your CSS to this and it works:

.container {
    display: grid;
    padding: 0;

    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 2px;
    margin: none;
}