Survey Form using Grid

Hey guys,

Newbie here…
I decided to use css grid for creating the survey form, and not simply the attribute.
But I still like my work. Now the only thing is that I can’t align the name/email/age textboxes to the words on the left. Does someone know of a solution?

Many thanks!


Good effort.
You should use labels and input fields for the name, age, email section.

Also submit does nothing.

You messed it up with all margin-top’s, here’s how you gonna fix it:

ul, li{
  padding-left: 0px;
  margin: 0px;

#name1 ul li {
            list-style-type: none;
            margin-top: 0px;

#input ul li {
            list-style-type: none;
            margin-top: 0px;

And if you want to move them closer together, second “parameter” in grid gap you must modify, second ‘XXXpx’ into number until it you get desired effect.

grid-gap: XXXpx XXXpx;

good attempt , page looks clean. The reason why your alignment dosent work because your grid column is taking up the space if you inspect with google doc. I recommend removing the columns in the grid as you do not need them because by default the labels and inputs are already side by side with each other.

Secondly , avoid using descendent and ids in css #name1 ul li because this can mess up the specificity and make ur css code messy as well. use classes, even for 1 element give it a class and stick to using classes in css. The reason because classes are reusable and have the same specificity. Having the same specificity , gives u an easier time to override code.

If you want to use descendant ul li for example use at most one level

Thank you!
Okay so I deleted all margin-top etc. and just entered a break to have space in between. Now it’s correctly aligned. I might change that grid element into a grid of its own and then change the row gap as you suggested, but that 'll just make it a little too complicated for now.

Thanks. Yeah, I know you shouldn’t work too much with id’s, but I started following the ‘user stories’ and they require you to make id’s for so many things. I think I’m just going to look at the design of the challenge from now on and don’t worry too much about the user stories. It’s only useful to see if I’m missing any significant things I should’ve used, such as the label and radio attributes in this challenge.

As for removing the columns of my grid, that’s a solution, but I’ll keep it as it is, for now. It looks good for me now. (found solution for the alignment).

Thanks. Yes, changed the submit button and it works now. You even get an alert :).

1 Like