Experimenting with Grid-Container

I’ve had unpredictable results using grid-container in CSS. To try to learn what qualifiers control how styling appears, I’ve created a simple project that has an external CSS file with the CSS code shown

I have not been able to control the amount of vertical space that appears between rows. I’ve tried setting a gap: 5px; value that made no difference. I changed it to grid-row-gap: 5px; and that made no difference. I want vertical spacing between the rows of boxes to be about half what it appears as shown.

MORE INFORMATION: In writing this I forgot to add that I had used the Inspect Dev_Tool and learned that the .gen-box selector shows a margin at the top but I didn’t declare one. If I could figure out where that margin comes from I could fix the problem, perhaps. [Can anyone tell me how to use Windows Snipping Tool to take a ss of the Inspect results? I tried using a timed delay but the Inspect result disappears when I click to drag around the area.]

Here’s a ss of part of the resulting screen:

The CSS:

/*
Defines page layout and grid with 3 rows/3 columns
*/
.container-test
{
  display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto auto auto;
  width: 1200px;
  height: 520px;
  border-style: ridge;
  border-color: brown;
  border-width: 2px;
  border-radius: 10px;
  padding-top:40px;
  margin-left: 20px;
  background-color: bisque;
  font-family: Birthstone;
  font-size: 14.5px;
  line-height: 93%;
  text-align: left;
}

.container-test > div
{
  width: 355px;
  height: 125px;
  padding-left: 5px;
  padding-top: 3px;
  border-radius: 5px;
  border-color: brown;
}


/*
Defines the box for each generation's data
*/
.gen-box
{
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  border-style: ridge;
  border-width: 2px;
  border-color: brown;
}

The HTML:
  <title>Container Testing</title>

<style>
  /*  ALL STYLING IS IN EXTERNAL CSS FILES; SEE LINKS BELOW  */
</style>

  <link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Birthstone">

  <link
  rel="stylesheet"
  href="Styles/container-test.css">
    <div class="gen-box">
      <u>Name:</u>&nbsp;&nbsp;Lorem Ipsum<br>
      <u>LDS ID:</u>&nbsp;&nbsp;Lorem Ipsum<br>
      <u>Birthdate:</u>&nbsp;&nbsp;Lorem Ipsum<br>
      <u>Birthplace:</u>&nbsp;&nbsp;Lorem Ipsum<br>
      <u>Died:</u>&nbsp;&nbsp;Lorem Ipsum<br>
      <u>Spouse(s):</u>&nbsp;&nbsp;Lorem Ipsum<br>
      <u>Children:</u>&nbsp;&nbsp;
      Lorem Ipsum<br>
      Lorem Ipsum<br>
      Lorem Ipsum<br>
    </div>

    <div class="gen-box">
      2&nbsp;&nbsp;<br>Ipsum lorem
    </div>
    <div class="gen-box">
      3&nbsp;&nbsp;<br>Ipsum lorem
    </div>
    <div class="gen-box">
      4&nbsp;&nbsp;<br>Ipsum lorem
    </div>
    <div class="gen-box">
      5&nbsp;&nbsp;<br>Ipsum lorem
    </div>
    <div class="gen-box">
      6&nbsp;&nbsp;<br>Ipsum lorem
    </div>
    <div class="gen-box">
      7&nbsp;&nbsp;<br>Ipsum lorem
    </div>
    <div class="gen-box">
      8&nbsp;&nbsp;<br>Ipsum lorem
    </div>
    <div class="gen-box">
      9&nbsp;&nbsp;<br>Ipsum lorem
    </div>
    
  </div><!--    END of .container-test  -->
```

I found a solution.

In writing the op I forgot to add that I had used the Inspect Dev_Tool and learned that the .gen-box selector shows a margin at the top but I didn’t declare one. If I could figure out where that margin comes from I could fix the problem, perhaps. FIXED: On further inspection I discovered that the problem arose from my .grid-template-row: auto auto auto; property declaration. I changed auto auto auto to 140px 140px 140px and got the vertical spacing I want.

I tweaked to the .grid-template-row selector as the problem after studying the Inspect window more carefully.

I hope this will help others.