Help - Search - Members - Calendar
Full Version: Using grid
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
Pedroski55
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!
pandy
Any CSS to go with that?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.