J'essaie de créer un formulaire de saisie dans une grille au sein d'une autre grille mais cela ne fonctionne pas. J'ai cherché plusieurs fois comment créer une grille CSS mais je ne sais pas ce que je fais de mal. La page entière est bloquée dans la première case de la grille. Je me demande si j'utilise le bon endroit pour implémenter correctement la grille ou si cela pourrait être la façon dont j'ai mis la classe/l'identifiant de la grille
Je suis nouveau sur html/CSS, donc si vous avez d'autres questions, n'hésitez pas à me le faire savoir. (Sauf que l'indentation a été gâchée lors du copier-coller, ce que j'ai essayé de corriger)
<!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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Supprimez
#grid并将其包裹在其他元素周围。我还从您的表单中删除了margin-top和margin-bottomdu corps du texte afin qu'il supprime les espacements indésirables. Comme ça :#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; }