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> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Remove
#gridfrom the body and wrap it around other elements. I also removed themargin-topandmargin-bottomfrom 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; }