The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Using grid, My webpage does not go to the bottom without a lot of br tags
Pedroski55
post Sep 29 2020, 04:40 AM
Post #1





Group: Members
Posts: 1
Joined: 29-September 20
Member No.: 27,560



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!

This post has been edited by Pedroski55: Sep 29 2020, 04:54 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 29 2020, 04:48 AM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 19,229
Joined: 9-August 06
Member No.: 6



Any CSS to go with that?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th November 2020 - 07:53 PM