Css grid problem

Css grid problem
0

#1

I have been trying to create a form using css grid for a few days,but I run to a few problems I can’t figure out.Here is the problem :

  1. I can’t make my header cover entire top of my form
  2. I also try to add border to my label to test it,however the “password” label did not have border applied to it and when I click on “password” label it didn’t trigger the input
  3. Swapping input and label in html will mess the layout,I do this so I can style the label when input is focused

Here is my html and css: https://codepen.io/James_z/pen/WKRXOG

Any help will be appreciated :slight_smile:


#2

Hi,

Just some observations…

Sign Up is part of your form so the padding on that form element applies to your h1. h1 also comes with some top margin by default. I would wrap the form in a div, take that outside of the form and probably not use h1. h1 is not for formatting text

You don’t have border on email label because of small typo - missed a quotation mark after type="email

<input id="email" name="email" type="email>
<label for="email">Email</label>

I’m not not sure what your styling plan involves but putting labels before the input in your html would greatly simplify things. Right now your labels are aligned with the following input, not the input they are labelling (First Name is in front of Last Name input field).

<label for="email">Email</label>	
<input id="email" name="email" type="email">

#3
  1. Your form padding: 1.2em; will not let your h1 to be full width.
    Solution: Delete the padding from the form, wrap all your labels and inputs into a div class=“form-wrapper” and add that pading to the class form-wrapper.
  2. already pointed out by @James_z

#4

After thinking about that some I realized what you wanted (I think). You wanted the label to be after input so you could use + selector to target label style when input is focused. I’m sure there are other ways but I would use the order property on the input to do that.

See if this does what you want…


#5

Thank you everyone for the help,I really appreciate it :),first problem and second problem have been fixed,however third problem seem to be more tricky,changing the order property make the layout broken,I think I am going to put the label before input instead