search

Home  >  Q&A  >  body text

Why doesn't my html/CSS grid work in grid?

I'm trying to create an input form in a grid within another grid but it doesn't work. I've looked up many times how to make a css grid but I don't know what I'm doing wrong. The entire page is stuck in the first grid box. I'm wondering if I'm using the right place to implement the grid correctly or if it could be how I put the grid class/id into

I'm new to html/CSS so if you have any other questions please let me know. (Except the indentation got messed up when I copy-pasted, which I tried to fix)

<!Doctype html>
 <lang="en">
  <head>
   <meta charset="utf-8">
   <title>Form</title>
   <style>
    #grid {
           display: grid;
           grid-template-columns: 160px auto auto auto;
           grid-template-rows: 150px auto 100px;
       grid-template-areas:
       "h h h h"
       "n g g g"
       "f f f f";
       }
    #ingrid {
       grid-area: g;
           display: grid;
           grid-template-columns: auto auto auto;
           grid-template-rows: auto;
       grid-template-areas:
       "l m r";
       }
    #header {
       grid-area: h;
           background-color: #DBA3EE;
       color: #FFF; 
           line-height: 250%; 
       font-family: Arial, Verdana, sans-serif; 
       font-weight: bold;
           font-size: 72px;
       text-indent:20px;
       }
    #nav {
           grid-area: n;
           background-color: #15394F;
       color: #FFF; 
       font-family: Arial, Verdana, sans-serif; 
       font-weight: bold;
           font-size: 25px;
       text-indent:2px;
       padding: 8px;
       }
   .form {
        grid-area: g;
    padding:5px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 2px solid #000;
    }
   .inform {
        grid-area: l;
    grid-area: m;
    grid-area: r;
        }
   .midform {
        grid-area: m;
        }
   .rightform {
        grid-area: r;
        }
   .leftform {
        grid-area: l;
        }
   </style>
  </head>
  <body id="grid">
   <div id="header">HEADER</div>
   <div id="nav">Home<br>Main<br>Form<br></div>
   
    <form class="form">
     
     <div class="inform">
      <div class="midform">How would you like to be contact? <br>
       <input type="radio" name="contact" value="email" checked="checked"> email <br>
       <input type="radio" name="contact" value="phone" > phone <br></div>
          <div class="midform">Which course(s) are you registering? <br>
           <input type="checkbox" name="course" value="ACS-1805" >ACS-1805<br>
           <input type="checkbox" name="course" value="ACS-1809" >ACS-1809<br>
           <input type="checkbox" name="course" value="ACS-1903" >ACS-1903<br></div>
       
      <div class="midform">Payment Method: <input list="paymenttype" name="paymenttype"><br>
       <datalist id="paymenttype">
        <option value="Debit">
        <option value="MasterCard">
        <option value="VISA">
       </datalist></div>
     </div>
     
     <div class="inform">
      <div class="midform">Special Request<br>
       <textarea name="comments" id="sptextarea"></textarea><br></div>
       
      <div class="leftform">
       <div>Rate Your Previous</div>
       <div>Experience (with 10 is</div>
       <div>the best): </div>
      </div>
      
       <div class="midform">
        <div>0<input type="range" min="1" max="10" step="1" value="5">10<br>
        </div>
       </div>
      
           <div class="midform"><button type="submit">Submit</button>
           <button type="reset">Reset</button></div>
      </div>
    </form>
  </body>
</html>

P粉146080556P粉146080556286 days ago393

reply all(1)I'll reply

  • P粉317679342

    P粉3176793422024-02-18 09:31:56

    Remove #grid from the body and wrap it around other elements. I also removed the margin-top and margin-bottom from your form so that it removes the unwanted spacing. like this:

    #grid {
      display: grid;
      grid-template-columns: 160px auto auto auto;
      grid-template-rows: 150px auto 100px;
      grid-template-areas: "h h h h" "n g g g" "f f f f";
    }
    
    #ingrid {
      grid-area: g;
      display: grid;
      grid-template-columns: auto auto auto;
      grid-template-rows: auto;
      grid-template-areas: "l m r";
    }
    
    #header {
      grid-area: h;
      background-color: #DBA3EE;
      color: #FFF;
      line-height: 250%;
      font-family: Arial, Verdana, sans-serif;
      font-weight: bold;
      font-size: 72px;
      text-indent: 20px;
    }
    
    #nav {
      grid-area: n;
      background-color: #15394F;
      color: #FFF;
      font-family: Arial, Verdana, sans-serif;
      font-weight: bold;
      font-size: 25px;
      text-indent: 2px;
      padding: 8px;
    }
    
    .form {
      grid-area: g;
      padding: 5px;
      border: 2px solid #000;
    }
    
    .inform {
      grid-area: l;
      grid-area: m;
      grid-area: r;
    }
    
    .midform {
      grid-area: m;
    }
    
    .rightform {
      grid-area: r;
    }
    
    .leftform {
      grid-area: l;
    }
    How would you like to be contact?
    email
    phone
    Which course(s) are you registering?
    ACS-1805
    ACS-1809
    ACS-1903
    Payment Method:
    Special Request

    Rate Your Previous
    Experience (with 10 is
    the best):
    010

    reply
    0
  • Cancelreply