I am working on setting up a 2-column HTML form using CSS grid.
In the first column, I have labels placed on individual rows. In the second column, I have form elements also placed on individual rows.
This is my initial attempt at this task and I am still learning CSS and HTML. If anyone could help me understand where I may be going wrong, that would be really helpful. Thank you.
Below is the CSS and HTML code for the form.
@media screen and (min-width: 600px) {
form {justify-self: start;
max-width: 600px;
display: grid;
grid-template-columns: 20% 1fr%;
grid-template-rows: repeat(6, 20%);
grid-gap: 20px;
font-family: Arial, Helvetica, sans-serif;
}
label[for="menu"] {
grid-area: 1 / 1 / 1 / 2;
}
label[for="bio"] {
grid-area: 2 / 1 / 2 / 2;
}
label[for="name"]{
grid-area: 3 / 1 / 3 / 2;
}
label [for="email"]{
grid-area: 4 / 1 / 4 / 2;
}
.grid5 {
grid-area: 5 / 1 / 5 / 2;
}
.grid6 {
grid-area: 6 / 1 / 6 / 2;
}
select {
grid-area: 1 / 2 / 1 / 3;
}
textarea {
grid-area: 2 / 2 / 2 / 3;
}
#name {
grid-area: 3 / 2 / 3 / 3;
}
#email {
grid-area: 4 / 2 / 4 / 3;
}
}<div class="form">
<form action="" method="post">
<div id="grid1"> <label for="menu">Type</label> <select name="pet_name" id="menu">
<option>Cat</option>
<option>Dog</option>
<option>Hamster</option>
<option>Zebra</option>
<option>Other</option>
</select>
</div>
<div id="grid2"> <label for="bio">Biography</label> <textarea name="pet_bio" id="bio"></textarea> </div>
<div id="grid3"> <label for="name">Name</label> <input type="text" id="name" name="pet_name"> </div>
<div id="grid4"> <label for="email">Owners Email</label> <input id="email" name="pet_owner_email"></div>
<div id="grid5"> <button type="submit" id="new-pet-submit-button">Create New Pet</button> </div>
<div id="grid6"> <button type="reset" id="reset">Reset</button></div>
</form>
</div>