Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Using grid

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:

<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!

<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>
<div>End of third container and body</div><br>

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!

Posted by: pandy Sep 29 2020, 04:48 AM

Any CSS to go with that?

Powered by Invision Power Board (
© Invision Power Services (