How can I use a grid to format the layout of a form in CSS?

Question

I've been running around trying to figure out how I can use grid to format the layout of a form. I seem to be doing exactly what other coders are doing to utilize grid in CSS but it's just not working. My goal is to put the "type" selector to the right of the pet name and the reset button to the right of the submit button. Could someone point out what I'm missing? my css code and what the form looks like

The HTML for the form

Answer 1

I think your issue might be because of the <div> you have on both input and select tags. By default div are block elements and browsers will start div on a new line by placing a line break before and after a div.

• One quick fix is removing the div surrounding your Pet Name and Type. If you must, have both of them in a single div.
• Preferably use 1fr in place of 50%. You will get this desired output

Answer 2

You are using seperate div for individual elements, that's why the elements are displaying one after another. You can put a common div for the elements which you want to display adjacent to each other.

<div class="grid">
<div>
<legend>Add pet</legend>
</div>
<div>
<label for="Name">Pet Name</label>
<input type="text" id="name" name="pet_name">
<label for="Type"></label>
<select id="type" name="pet_type">
<option value="Cat">Cat<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
</select>
</div>
<div>
<button type="submit" id="new_pet_submit_button">Create New Pet</button>
<button type="reset">Reset</button>
</div>
</div>