Saya cuba mencipta borang input dalam grid dalam grid lain tetapi ia tidak berfungsi. Saya telah melihat banyak kali cara membuat grid css tetapi saya tidak tahu apa yang saya lakukan salah. Keseluruhan halaman tersekat dalam kotak grid pertama. Saya tertanya-tanya sama ada saya menggunakan tempat yang betul untuk melaksanakan grid dengan betul atau mungkin cara saya meletakkan kelas/id grid ke dalam
Saya baru menggunakan html/CSS jadi jika anda mempunyai sebarang soalan lain sila beritahu saya. (Kecuali lekukan itu rosak apabila saya salin-tampal, yang saya cuba betulkan)
<!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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Alih keluar
#grid并将其包裹在其他元素周围。我还从您的表单中删除了margin-top和margin-bottomdaripada teks badan supaya ia menghilangkan jarak yang tidak diingini. Seperti ini:#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; }