Posted by: Pedroski55 Sep 29 2020, 04:40 AM
EDIT: I figured it out! The first 2 containers only have 1 row, height is set to 400px. The 3rd container has 4 rows @ 400px, so it needed more height!!
Sorry to have troubled you!!
I am just learning to use html grid.
I don't know if it is sensible or advisable to use more than 1 grid container on any given page. Anyway, I have tried using 3 grids, seems to work, except for the last grid.
To help me see what is where I put divs for beginning and end of each grid container:
CODE
<div>Beginning of first container</div><br>
<div class="grid-container">
<div id="div-china">1</div>
<div id="div-alien">2</div>
<div id="div-alien2">3</div>
</div> <br>
<div>End of first container</div><br>
<div>Beginning of second container</div><br>
This shows up nicely, except for the last grid container. Unless I put a lot of <br>tags, I don't see the last part.
I don't know it this is caused by Firefox messing up the css, or not refreshing properly, or what. For container 1 and 2 this works fine!
CODE
<div>Beginning of third container</div><br>
<div class="grid-container">
<div id="div-pic1">7</div>
<div id="div-pic2">8</div>
<div id="div-pic3">9</div>
<div id="div-china">10</div>
<div id="div-alien">11</div>
<div id="div-alien2">12</div>
<div>13 <br>Hi me!</div>
<div>14 <br>Hi me!</div>
<div>15 <br>Hi me!</div>
<div class="item16">16 <br>Hi me!<br>
<p>Use the <em>grid-row-gap</em> property to adjust the space between the rows.</p> </div>
</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>End of third container and body</div><br>
</body>
</html>
item16 spans 3 columns.
Or maybe I should only use 1 grid container per page??
Is there some way to avoid all these <br>tags. I don't need them for grid container 1 and 2.
Thanks in advance for any tips or advice!