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> Lorem Ipsum<br>
<u>LDS ID:</u> Lorem Ipsum<br>
<u>Birthdate:</u> Lorem Ipsum<br>
<u>Birthplace:</u> Lorem Ipsum<br>
<u>Died:</u> Lorem Ipsum<br>
<u>Spouse(s):</u> Lorem Ipsum<br>
<u>Children:</u>
Lorem Ipsum<br>
Lorem Ipsum<br>
Lorem Ipsum<br>
</div>
<div class="gen-box">
2 <br>Ipsum lorem
</div>
<div class="gen-box">
3 <br>Ipsum lorem
</div>
<div class="gen-box">
4 <br>Ipsum lorem
</div>
<div class="gen-box">
5 <br>Ipsum lorem
</div>
<div class="gen-box">
6 <br>Ipsum lorem
</div>
<div class="gen-box">
7 <br>Ipsum lorem
</div>
<div class="gen-box">
8 <br>Ipsum lorem
</div>
<div class="gen-box">
9 <br>Ipsum lorem
</div>
</div><!-- END of .container-test -->
```