Trying to set a grid out in 4x4, but getting a single column, and an 'invalid property type' error in the dev tools?

I've just started learning the grid system, and am having trouble setting out a 2x2 grid for a practice site I'm working on with the 4 images I have there (specifically on the grid-template-rows/grid-template-columns). The issue is that they are currently in a single column, and I'm getting an 'invalid property value' when I inspect it in chrome dev tools. Hopefully it's something basic that you all will be able to spot! Thanks in advance! (also this is my first time using StackOverflow so hopefully I don't mess the actual post up too bad)

I've tried adjusting the "grid-template-columns/rows" to be something like 4, 1fr, and changed the actual .gallery img to span: 2; and 1; (columns and rows respectively)

The main HTML is as follows:

<body>
    <!-- Navbar & Links -->
    <div class="navbar">
      <div class="navlink">
        <a href="#" class="home">Home</a>
        <a href="#" class="home">Gallery</a>
        <a href="#" class="home">About</a>
        <a href="#" class="home">Contact</a>
      </div>
    </div>
    <!-- Navbar & Links End -->

    <div class="banner">
      <h1>etienne</h1>
      <p>photography online</p>
    </div>

    <div class="gallery">
      <img src="img/gallery1.jpg" alt="Garden" />
      <img src="img/gallery2.jpg" alt="Garden" />
      <img src="img/gallery3.jpg" alt="Garden" />
      <img src="img/gallery4.jpg" alt="Garden" />
    </div>
  </body>
</html>

and the CSS for it is as follows:

.banner h1 {
  font-size: 8rem;
  letter-spacing: 1.4rem;
  font-family: "Dancing Script", cursive;
  color: black;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
    1px 1px 0 white;
}

.banner p {
  text-transform: lowercase;
  letter-spacing: -0.2rem;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
    1px 1px 0 white;
}

.gallery {
  display: grid;
  grid-template-rows: 4, 1fr;
  grid-template-columns: 4, 1fr;
  grid-gap: 20px;
  justify-content: center;

}

.gallery img {
  width: 200px;
  grid-column: span 1;
  grid-row: span 1;
}

Trying to get the images 2x2 in a grid, centered on the page (with some padding between) The 4 images are center aligned in a single column, and I'm getting the

Invalid Property Type error

in the dev tools.

Solution

I think your the mistake is at grid-template-rows and grid-template-columns

.gallery {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  justify-content: center;
}

.gallery {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  justify-content: center;
}

.gallery img {
  width: 200px;
  grid-column: span 1;
  grid-row: span 1;
}

    <div class="gallery">
      <img src="img/gallery1.jpg" alt="Garden" />
      <img src="img/gallery2.jpg" alt="Garden" />
      <img src="img/gallery3.jpg" alt="Garden" />
      <img src="img/gallery4.jpg" alt="Garden" />
    </div>